.hero-room{z-index:1000;margin-inline:calc(var(--page-margin-inline) * -1);position:relative;height:75vh;height:75svh;min-height:500px;display:flex;flex-direction:column;overflow:hidden}.hero-room__nav{position:fixed;bottom:var(--spacing-lg);left:var(--page-margin-inline);z-index:1000;opacity:0;transform:translateY(20px);visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility .3s ease}.hero-room__nav.visible{opacity:1;transform:translateY(0);visibility:visible}.hero-room__back-link{display:inline-flex;align-items:center;gap:var(--spacing-xs);color:var(--white);text-decoration:none;font-weight:600;font-size:var(--font-size-small);padding:var(--spacing-sm)var(--spacing-md);border-radius:100px;background:var(--color-accent-primary-95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 12px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.1),inset 0 1px rgba(255,255,255,.1);transition:all .2s ease;cursor:pointer;color:var(--text-color-inverse);&:hover { background:rgb(59,117,86,1); transform:translateX(-4px); box-shadow:0 6px 20px rgba(0,0,0,0.5),0 0 0 1px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.15); } &:active { transform:translateX(-2px) scale(0.98); } svg { width:1.1rem; height:1.1rem; flex-shrink:0; transition:transform 0.2s ease; } &:hover svg { transform:translateX(-3px); }}&:hover svg{transform:translateX(-3px)}.hero-room__media{position:absolute;inset:0;z-index:0;&:before { z-index:1; width:100%; height:100%; content:''; position:absolute; inset:0; background:radial-gradient( ellipse at center,transparent 0%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0.7) 100% ),linear-gradient( to bottom,rgba(0,0,0,0.4) 0%,transparent 20%,transparent 60%,rgba(30,31,38,0.8) 85%,#1e1f26 100% ); pointer-events:none; }}.hero-room__video{position:relative;width:100%;height:100%;object-fit:cover}.hero-room__content{position:relative;z-index:5;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.hero-room__title-image{max-width:min(90%,55ch);height:auto;animation:titleReveal 1.4s cubic-bezier(.16,1,.3,1)forwards;filter:drop-shadow(0 4px 20px rgba(0,0,0,.5))drop-shadow(0 8px 40px rgba(0,0,0,.3));opacity:0}@keyframes titleReveal{0%{opacity:0;transform:translateY(60px)scale(.85);filter:blur(15px)drop-shadow(0 4px 20px rgba(0,0,0,.5))}100%{opacity:1;transform:translateY(0)scale(1);filter:blur(0)drop-shadow(0 4px 20px rgba(0,0,0,.5))drop-shadow(0 8px 40px rgba(0,0,0,.3))}}.hero-room__scroll-indicator{position:absolute;bottom:var(--spacing-xl);left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);animation:scrollBounce 2.5s ease-in-out infinite;svg { width: 2rem; height: 2rem; }}@keyframes scrollBounce{0%,100%{transform:translateX(-50%)translateY(0);opacity:.6}50%{transform:translateX(-50%)translateY(10px);opacity:1}}@media(max-width:768px){.hero-room{min-height:85vh}.hero-room__title-image{max-width:95%}.hero-room__scroll-indicator{bottom:var(--spacing-lg)}}@media(prefers-reduced-motion:reduce){.hero-room__video{animation:none}.hero-room__title-image{animation:titleRevealSimple .5s ease forwards}@keyframes titleRevealSimple{0%{opacity:0}100%{opacity:1}}.hero-room__scroll-indicator{animation:none;opacity:.6}}.room-page-wrapper{max-width:1200px;margin:0 auto}.room-article{section + section { margin-top: var(--spacing-2xl); }}.room__header{text-align:center;margin-block:var(--spacing-xl)}.section-title{text-transform:uppercase;text-align:left;font-family:Bebas Neue,sans-serif;font-feature-settings:normal;font-size:var(--font-size-h2);line-height:var(--line-height-h2);font-variation-settings:normal;font-weight:700;&.under-overlay { display: block; margin: var(--spacing-lg) auto; margin-top: var(--spacing-sm); }}.divider{display:flex;position:relative;flex-direction:column}.separator{display:flex;align-items:center;justify-content:center;margin-top:var(--spacing-xl);svg { color: var(--color-accent-primary); }}@media(min-width:768px){.divider{margin:var(--spacing-lg)0}}.line{height:1px;width:5rem;background-color:#374151}.icon{width:1.25rem;height:1.25rem;margin:0 1rem;color:rgba(166,200,182,.5)}.room__title{font-size:3rem;margin-bottom:var(--spacing-xs);display:none}.room__short-description{font-size:1.2rem}.room__meta{margin-block:var(--spacing-xl)0;padding:0;position:relative;@media(max-width:600px){margin-block: var(--spacing-lg) 0;}}.room__meta-title{text-align:center;font-weight:600;margin-bottom:var(--spacing-md);color:var(--color-accent-primary);letter-spacing:.02em}.room__meta dl{display:flex;gap:var(--spacing-lg);justify-content:center;flex-wrap:wrap;max-width:1200px;margin:0 auto;> * { flex-shrink: 0; } @media (max-width: 600px) { gap: var(--spacing-sm); } .room__meta-item { text-wrap: test; display: flex; &:hover { text-decoration: underline; } &:not(:last-child)::after { content: '|'; margin-left: var(--spacing-lg); opacity: 0.3; font-weight: 300; @media (max-width: 600px) { margin-left: var(--spacing-sm); } } svg { width: 18px; height: 18px; opacity: 0.7; flex-shrink: 0; @media (max-width: 600px) { width: 16px; height: 16px; } } } .room__meta-item dt { display: flex; align-items: center; } .room__meta-item dd { color: var(--text-color); font-weight: 500; }}.room__content{text-align:left;line-height:var(--line-height-body);h2, h3, h4 { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-md); } p + p { margin-top: var(--spacing-md); }}.room__info{margin-top:var(--spacing-sm);display:flex;flex-direction:column;gap:var(--spacing-md);@media(min-width:768px){display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: var(--spacing-md);}.room__footer-section { display: flex; flex-direction: row; align-items: flex-start; gap: var(--spacing-sm); padding: var(--spacing-md); border-left: 3px solid rgba(166, 200, 182, 0.4); background: rgba(255, 255, 255, 0.02); transition: all 0.2s ease; &:hover { border-left-color: rgba(166, 200, 182, 0.8); background: rgba(255, 255, 255, 0.04); } &.room__footer-section--warning { border-left-color: rgba(245, 158, 11, 0.6); &:hover { border-left-color: rgba(251, 191, 36, 0.9); } svg { color: #f59e0b; } } svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: var(--spacing-xs); opacity: 0.7; transition: opacity 0.2s ease; } &:hover svg { opacity: 1; } .room__footer-content { flex: 1; text-align: left; } .room__footer-title { font-size: var(--font-size-h4); line-height: var(--line-height-h4); margin-bottom: var(--spacing-sm); font-weight: 600; letter-spacing: 0.01em; color: var(--color-text-primary); } p { margin: 0; } }}@keyframes floatIn{from{transform:translateX(100px)}to{transform:translateX(0)}}