/*
Theme Name: EMBER Starter
Theme URI: https://ember-restaurant.hr
Author: BOGU Design
Author URI: https://bogu.design
Description: Cinematic restaurant WordPress theme. Dark editorial storytelling with full-screen scene transitions, typewriter text reveals, deep parallax layering, interactive menu book cards, ambient video hero, film grain overlay and bilingual HR/EN support. Built for fine dining, bistros and chef-driven restaurants.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ember-starter
Tags: one-column, custom-menu, featured-images, translation-ready, restaurant, food
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,500&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  --ember: #d4874d;
  --ember-light: #e8a76e;
  --ember-glow: #f0c090;
  --amber: #c97b3a;
  --char: #141210;
  --char-mid: #1c1916;
  --char-soft: #252220;
  --smoke: #3a3532;
  --ash: #6b6260;
  --fog: #9c9490;
  --cream: #f2ece6;
  --bone: #e0d8cf;
  --white: #faf7f4;
  --wine: #6b2d3e;

  --ff: 'Fraunces', 'Georgia', serif;
  --fs: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --fm: 'JetBrains Mono', monospace;

  --mx: 1280px;
  --gx: clamp(1.25rem, 4vw, 2.5rem);
  --nav: 0px;
  --scene-gap: 0;

  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cinematic: cubic-bezier(0.77, 0, 0.175, 1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;overflow-x:hidden;scroll-behavior:auto}
body{font-family:var(--fs);font-weight:400;background:var(--char);color:var(--cream);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--ember);color:var(--char)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}
ul,ol{list-style:none}

.mx{max-width:var(--mx);margin:0 auto;padding:0 var(--gx)}

/* ═══ FILM GRAIN ═══ */
.grain{position:fixed;inset:0;pointer-events:none;z-index:99990;opacity:0.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:200px;animation:grainShift 0.5s steps(6) infinite}
@keyframes grainShift{0%{transform:translate(0)}20%{transform:translate(-2%,3%)}40%{transform:translate(3%,-1%)}60%{transform:translate(-1%,-3%)}80%{transform:translate(2%,1%)}100%{transform:translate(0)}}

/* ═══ LETTERBOX BARS ═══ */
.letterbox{position:fixed;left:0;right:0;height:clamp(16px,2.5vh,32px);background:var(--char);z-index:99980;pointer-events:none}
.letterbox--top{top:0}
.letterbox--bot{bottom:0}

/* ═══ CROSSHAIR CURSOR ═══ */
.xhair{position:fixed;pointer-events:none;z-index:100000;display:none}
.xhair__h,.xhair__v{position:absolute;background:var(--ember);opacity:0.4}
.xhair__h{width:24px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%)}
.xhair__v{width:1px;height:24px;top:50%;left:50%;transform:translate(-50%,-50%)}
@media(min-width:1024px){body{cursor:none}a,button{cursor:none}.xhair{display:block}}
body.x-big .xhair__h{width:48px;opacity:0.7}
body.x-big .xhair__v{height:48px;opacity:0.7}

/* ═══ SCENE LOADER ═══ */
.scene-loader{position:fixed;inset:0;background:var(--char);z-index:999999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.5rem}
.scene-loader.out{animation:sceneFade 1s var(--cinematic) 0.2s forwards}
@keyframes sceneFade{to{opacity:0;visibility:hidden}}
.scene-loader__flame{width:40px;height:40px;position:relative}
.scene-loader__flame::before,.scene-loader__flame::after{content:'';position:absolute;bottom:0;left:50%;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform:translateX(-50%)}
.scene-loader__flame::before{width:24px;height:32px;background:var(--ember);animation:flicker 0.8s ease-in-out infinite alternate}
.scene-loader__flame::after{width:14px;height:20px;background:var(--ember-glow);animation:flicker 0.6s ease-in-out infinite alternate-reverse}
@keyframes flicker{0%{transform:translateX(-50%) scale(1) rotate(-2deg)}100%{transform:translateX(-50%) scale(1.1,0.9) rotate(2deg)}}
.scene-loader__text{font-family:var(--fm);font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--ash)}

/* ═══ NAV — FLOATING PILL ═══ */
.fnav{position:fixed;top:clamp(20px,3vh,36px);left:50%;transform:translateX(-50%);z-index:9999;background:rgba(20,18,16,0.85);backdrop-filter:blur(20px);border:1px solid rgba(212,135,77,0.08);border-radius:999px;padding:6px 8px;display:flex;align-items:center;gap:0;transition:box-shadow 0.4s}
.fnav.glow{box-shadow:0 4px 30px rgba(212,135,77,0.08)}
.fnav__brand{font-family:var(--ff);font-size:1rem;font-weight:500;padding:0 16px;letter-spacing:0.03em;white-space:nowrap}
.fnav__brand em{color:var(--ember);font-style:normal}
.fnav__sep{width:1px;height:20px;background:rgba(242,236,230,0.08);margin:0 4px}
.fnav__link{font-size:0.72rem;font-weight:500;letter-spacing:0.02em;padding:8px 14px;border-radius:999px;color:var(--fog);transition:color 0.3s,background 0.3s;white-space:nowrap}
.fnav__link:hover,.fnav__link.now{color:var(--cream);background:rgba(242,236,230,0.06)}
@media(max-width:900px){.fnav__link{display:none}.fnav__sep:not(.fnav__sep--always){display:none}}
.fnav__lang{font-family:var(--fm);font-size:0.58rem;letter-spacing:0.06em;padding:6px 10px;border-radius:999px;color:var(--ash);transition:color 0.3s,background 0.3s}
.fnav__lang.on{color:var(--char);background:var(--ember)}
.fnav__rez{font-size:0.7rem;font-weight:600;padding:8px 18px;border-radius:999px;background:var(--ember);color:var(--char);transition:background 0.3s,transform 0.3s var(--spring)}
.fnav__rez:hover{background:var(--ember-light);transform:scale(1.04)}
.fnav__ham{display:none;width:22px;height:14px;position:relative;flex-direction:column;justify-content:space-between;padding:0 10px;box-sizing:content-box}
@media(max-width:900px){.fnav__ham{display:flex}}
.fnav__ham span{width:22px;height:1.5px;background:var(--cream);border-radius:1px;transition:transform 0.35s var(--out),opacity 0.2s;transform-origin:center}
.fnav__ham.on span:nth-child(1){transform:translateY(6.25px) rotate(45deg)}
.fnav__ham.on span:nth-child(2){opacity:0}
.fnav__ham.on span:nth-child(3){transform:translateY(-6.25px) rotate(-45deg)}

/* ═══ MOBILE FULLSCREEN ═══ */
.fs-menu{position:fixed;inset:0;z-index:9990;pointer-events:none}
.fs-menu.on{pointer-events:all}
.fs-menu__bg{position:absolute;inset:0;background:rgba(20,18,16,0.97);opacity:0;transition:opacity 0.5s}
.fs-menu.on .fs-menu__bg{opacity:1}
.fs-menu__list{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0.4rem}
.fs-menu__item{font-family:var(--ff);font-size:clamp(1.6rem,4.5vw,2.8rem);font-weight:400;opacity:0;transform:translateY(20px);transition:opacity 0.4s var(--out),transform 0.4s var(--out),color 0.3s}
.fs-menu.on .fs-menu__item{opacity:1;transform:translateY(0)}
.fs-menu.on .fs-menu__item:nth-child(1){transition-delay:0.05s}
.fs-menu.on .fs-menu__item:nth-child(2){transition-delay:0.1s}
.fs-menu.on .fs-menu__item:nth-child(3){transition-delay:0.15s}
.fs-menu.on .fs-menu__item:nth-child(4){transition-delay:0.2s}
.fs-menu.on .fs-menu__item:nth-child(5){transition-delay:0.25s}
.fs-menu.on .fs-menu__item:nth-child(6){transition-delay:0.3s}
.fs-menu__item:hover{color:var(--ember)}

/* ═══ HERO — CINEMATIC SCENE ═══ */
.scene-hero{height:100vh;min-height:600px;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.scene-hero__media{position:absolute;inset:0}
.scene-hero__media img{width:100%;height:100%;object-fit:cover;animation:slowZoom 30s ease-in-out infinite alternate}
@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.06)}}
.scene-hero__dim{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(20,18,16,0.4) 0%,rgba(20,18,16,0.75) 100%)}
.scene-hero__content{position:relative;z-index:2;max-width:720px;padding:0 var(--gx)}
.scene-hero__eyebrow{font-family:var(--fm);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ember);margin-bottom:1.5rem;display:flex;align-items:center;justify-content:center;gap:10px}
.scene-hero__eyebrow-line{width:24px;height:1px;background:var(--ember)}
.scene-hero__h1{font-family:var(--ff);font-size:clamp(2.5rem,6vw,5rem);font-weight:400;line-height:1.08;margin-bottom:1.25rem;color:var(--cream)}
.scene-hero__h1 em{font-style:italic;color:var(--ember)}
.scene-hero__sub{font-size:clamp(0.9rem,1.2vw,1.05rem);font-weight:300;color:var(--fog);max-width:500px;margin:0 auto 2.5rem;line-height:1.85}
.scene-hero__acts{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap}

/* Buttons */
.btn-ember{display:inline-flex;align-items:center;gap:8px;font-size:0.78rem;font-weight:600;padding:12px 28px;border-radius:999px;background:var(--ember);color:var(--char);transition:background 0.3s,transform 0.3s var(--spring)}
.btn-ember:hover{background:var(--ember-light);transform:scale(1.04)}
.btn-smoke{display:inline-flex;align-items:center;gap:8px;font-size:0.78rem;font-weight:600;padding:12px 28px;border-radius:999px;border:1px solid rgba(242,236,230,0.15);color:var(--cream);transition:background 0.3s,color 0.3s,border-color 0.3s}
.btn-smoke:hover{background:var(--cream);color:var(--char);border-color:var(--cream)}

.scene-hero__scroll{position:absolute;bottom:clamp(24px,4vh,48px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.scene-hero__scroll-dot{width:3px;height:16px;border-radius:2px;background:var(--ember);animation:scrollDot 2s ease-in-out infinite}
@keyframes scrollDot{0%,100%{opacity:0.3;transform:scaleY(0.5)}50%{opacity:1;transform:scaleY(1)}}

/* ═══ SCENE SECTIONS (full-height) ═══ */
.scene{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}
.scene--pad{padding:clamp(5rem,12vh,8rem) 0}
.scene--linen{background:var(--char-mid)}
.scene--bone{background:var(--bone);color:var(--char)}

/* ═══ STORY SECTION (split with typewriter) ═══ */
.story-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
@media(max-width:900px){.story-split{grid-template-columns:1fr}}
.story-split__visual{position:relative}
.story-split__img{border-radius:4px;overflow:hidden;aspect-ratio:4/5}
.story-split__img img{width:100%;height:100%;object-fit:cover}
.story-split__stamp{position:absolute;top:-12px;right:-12px;width:80px;height:80px;border-radius:50%;background:var(--ember);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:0;box-shadow:0 8px 24px rgba(212,135,77,0.25)}
.story-split__stamp-num{font-family:var(--ff);font-size:1.4rem;font-weight:700;color:var(--char);line-height:1}
.story-split__stamp-txt{font-family:var(--fm);font-size:0.42rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--char)}

.tag-line{font-family:var(--fm);font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--ember);display:inline-flex;align-items:center;gap:8px;margin-bottom:0.75rem}
.tag-line__dash{width:16px;height:1px;background:var(--ember)}

.heading{font-family:var(--ff);font-size:clamp(2rem,4vw,3rem);font-weight:400;line-height:1.15}
.heading em{font-style:italic;color:var(--ember)}

.prose{font-size:1rem;font-weight:300;color:var(--fog);line-height:1.95;margin-top:1rem}
.prose p+p{margin-top:1.25rem}

/* Typewriter */
.typewriter{overflow:hidden;border-right:2px solid var(--ember);white-space:nowrap;animation:blink 1s step-end infinite}
@keyframes blink{50%{border-color:transparent}}

/* ═══ MENU CARDS (book-open style) ═══ */
.menu-scene{padding:clamp(5rem,12vh,8rem) 0}
.menu-tabs{display:flex;justify-content:center;gap:0.5rem;margin-bottom:3rem;flex-wrap:wrap}
.menu-tab{font-family:var(--fm);font-size:0.68rem;letter-spacing:0.06em;padding:8px 20px;border-radius:999px;border:1px solid var(--smoke);color:var(--ash);transition:all 0.3s var(--spring)}
.menu-tab:hover,.menu-tab.lit{background:var(--ember);border-color:var(--ember);color:var(--char)}

.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(212,135,77,0.06)}
@media(max-width:700px){.menu-grid{grid-template-columns:1fr}}
.menu-page{background:var(--char-mid);padding:clamp(1.5rem,3vw,2.5rem)}
.menu-page__title{font-family:var(--ff);font-size:1.5rem;font-weight:500;margin-bottom:0.3rem}
.menu-page__subtitle{font-family:var(--fm);font-size:0.6rem;letter-spacing:0.08em;color:var(--ember);text-transform:uppercase;margin-bottom:1.5rem}

.dish{padding:1rem 0;border-bottom:1px solid rgba(242,236,230,0.04);transition:padding-left 0.3s var(--out)}
.dish:hover{padding-left:0.75rem}
.dish:last-child{border:none}
.dish__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.dish__name{font-family:var(--ff);font-size:1rem;font-weight:500}
.dish__price{font-family:var(--fm);font-size:0.8rem;color:var(--ember);white-space:nowrap}
.dish__desc{font-size:0.82rem;font-weight:300;color:var(--ash);margin-top:0.2rem;line-height:1.6}
.dish__badge{display:inline-block;font-family:var(--fm);font-size:0.52rem;letter-spacing:0.04em;padding:2px 8px;border-radius:999px;background:rgba(212,135,77,0.1);color:var(--ember);margin-left:0.5rem;vertical-align:middle}

/* ═══ ATMOSPHERE GALLERY (diagonal grid) ═══ */
.atmos-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,280px);gap:6px}
.atmos-grid__item{overflow:hidden;border-radius:3px;position:relative}
.atmos-grid__item img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s var(--out)}
.atmos-grid__item:hover img{transform:scale(1.07)}
.atmos-grid__item:nth-child(1){grid-column:1/3;grid-row:1/3}
.atmos-grid__item:nth-child(2){grid-column:3/4}
.atmos-grid__item:nth-child(3){grid-column:4/5}
.atmos-grid__item:nth-child(4){grid-column:3/5;grid-row:2/3}
@media(max-width:768px){.atmos-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.atmos-grid__item{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4/3}}

/* ═══ TESTIMONIAL — SPOTLIGHT ═══ */
.spotlight{text-align:center;max-width:700px;margin:0 auto;position:relative;min-height:240px}
.spotlight__item{position:absolute;inset:0;opacity:0;transform:translateY(12px);transition:opacity 0.6s var(--out),transform 0.6s var(--out);display:flex;flex-direction:column;align-items:center;justify-content:center}
.spotlight__item.on{opacity:1;transform:translateY(0);position:relative}
.spotlight__quote{font-family:var(--ff);font-size:clamp(1.1rem,2.2vw,1.6rem);font-weight:300;font-style:italic;line-height:1.7;color:var(--cream);margin-bottom:1.5rem}
.spotlight__who{font-weight:600;font-size:0.88rem;color:var(--ember)}
.spotlight__from{font-size:0.72rem;color:var(--ash);margin-top:2px}
.spotlight__dots{display:flex;justify-content:center;gap:6px;margin-top:2rem}
.spotlight__dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--smoke);transition:background 0.3s,border-color 0.3s}
.spotlight__dot.on{background:var(--ember);border-color:var(--ember)}

/* ═══ RESERVATION CTA — GLOWING BOX ═══ */
.res-glow{position:relative;border-radius:8px;overflow:hidden;margin:0 var(--gx)}
.res-glow__bg{position:absolute;inset:0}
.res-glow__bg img{width:100%;height:100%;object-fit:cover}
.res-glow__bg::after{content:'';position:absolute;inset:0;background:rgba(20,18,16,0.6)}
.res-glow__body{position:relative;z-index:2;padding:clamp(3rem,8vw,5rem);text-align:center;color:var(--cream)}
.res-glow__h{font-family:var(--ff);font-size:clamp(2rem,4vw,3rem);font-weight:400;line-height:1.15;margin-bottom:1rem}
.res-glow__h em{font-style:italic;color:var(--ember-glow)}
.res-glow__p{font-size:1rem;font-weight:300;color:var(--fog);max-width:440px;margin:0 auto 2rem;line-height:1.8}
.res-glow::before{content:'';position:absolute;top:-2px;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--ember),transparent);z-index:3;animation:glowPulse 3s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:0.3}50%{opacity:1}}

/* ═══ CONTACT ═══ */
.contact-duo{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
@media(max-width:900px){.contact-duo{grid-template-columns:1fr}}
.c-block{margin-bottom:2rem}
.c-block__tag{font-family:var(--fm);font-size:0.58rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ember);margin-bottom:0.4rem}
.c-block__val{font-family:var(--ff);font-size:1.2rem}
.c-block__val a:hover{color:var(--ember)}

.ember-input,.ember-textarea,.ember-select{width:100%;background:var(--char-soft);border:1px solid rgba(242,236,230,0.06);border-radius:6px;padding:12px 16px;font-family:var(--fs);font-size:0.92rem;color:var(--cream);transition:border-color 0.3s;outline:none}
.ember-input:focus,.ember-textarea:focus,.ember-select:focus{border-color:var(--ember)}
.ember-textarea{min-height:100px;resize:vertical}
.ember-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 7L1 3h8z' fill='%23d4874d'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.ember-label{font-size:0.72rem;font-weight:600;color:var(--fog);margin-bottom:0.4rem;display:block}
.ember-field{margin-bottom:1.5rem}

/* ═══ INNER PAGE TOP ═══ */
.ipage{padding:clamp(8rem,16vh,12rem) 0 clamp(3rem,6vh,5rem);text-align:center;position:relative}
.ipage__crumb{font-size:0.78rem;color:var(--ash);margin-bottom:0.75rem}
.ipage__crumb a:hover{color:var(--ember)}
.ipage__h{font-family:var(--ff);font-size:clamp(2.2rem,5vw,4rem);font-weight:400}
.ipage__h em{font-style:italic;color:var(--ember)}

/* ═══ MAP ═══ */
.map-embed{border-radius:6px;overflow:hidden;height:380px;margin:0 var(--gx)}
.map-embed iframe{width:100%;height:100%;border:0;filter:brightness(0.85) contrast(1.1) saturate(0.6);transition:filter 0.5s}
.map-embed:hover iframe{filter:brightness(0.95) saturate(0.8)}

/* ═══ FOOTER ═══ */
.ft{padding:clamp(4rem,8vw,6rem) 0 2rem;border-top:1px solid rgba(212,135,77,0.06)}
.ft__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem}
@media(max-width:900px){.ft__grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ft__grid{grid-template-columns:1fr}}
.ft__brand{font-family:var(--ff);font-size:1.3rem;font-weight:500;margin-bottom:1rem}
.ft__brand em{color:var(--ember);font-style:normal}
.ft__blurb{font-size:0.85rem;font-weight:300;color:var(--ash);line-height:1.8;max-width:280px}
.ft__col-h{font-family:var(--ff);font-size:0.9rem;font-weight:500;margin-bottom:1rem;color:var(--cream)}
.ft__link{display:block;font-size:0.82rem;font-weight:300;color:var(--ash);padding:0.25rem 0;transition:color 0.3s}
.ft__link:hover{color:var(--cream)}
.ft__bot{display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;border-top:1px solid rgba(242,236,230,0.04);font-size:0.68rem;color:var(--smoke)}
@media(max-width:600px){.ft__bot{flex-direction:column;gap:1rem;text-align:center}}
.ft__top-link{color:var(--ember);transition:opacity 0.3s}
.ft__top-link:hover{opacity:0.6}

/* ═══ SCROLL REVEALS ═══ */
.an{opacity:0;transform:translateY(24px);transition:opacity 0.7s var(--out),transform 0.7s var(--out)}
.an.go{opacity:1;transform:translateY(0)}
.an-d1{transition-delay:0.06s}.an-d2{transition-delay:0.12s}.an-d3{transition-delay:0.18s}.an-d4{transition-delay:0.24s}.an-d5{transition-delay:0.3s}
.an-zoom{opacity:0;transform:scale(0.94);transition:opacity 0.7s var(--out),transform 0.7s var(--out)}.an-zoom.go{opacity:1;transform:scale(1)}
.an-left{opacity:0;transform:translateX(-30px);transition:opacity 0.7s var(--out),transform 0.7s var(--out)}.an-left.go{opacity:1;transform:translateX(0)}
.an-right{opacity:0;transform:translateX(30px);transition:opacity 0.7s var(--out),transform 0.7s var(--out)}.an-right.go{opacity:1;transform:translateX(0)}



.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);overflow:hidden;height:1px;width:1px}
/* ═══ CROSSHAIR ═══ */
.xhair{position:fixed;pointer-events:none;z-index:999999;display:none;transform:translate(-50%,-50%)}
.xhair__h,.xhair__v{position:absolute;background:var(--ember);opacity:1}
.xhair__h{width:32px;height:1.5px;top:50%;left:50%;transform:translate(-50%,-50%)}
.xhair__v{width:1.5px;height:32px;top:50%;left:50%;transform:translate(-50%,-50%)}
@media(min-width:1024px){body{cursor:none}a,button{cursor:none}.xhair{display:block}}
body.x-big .xhair__h{width:56px}
body.x-big .xhair__v{height:56px}

/* ═══ HERO ═══ */
.scene-hero__dim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,12,10,0.65) 0%,rgba(14,12,10,0.3) 40%,rgba(14,12,10,0.3) 60%,rgba(14,12,10,0.8) 100%)}
.scene-hero__h1{font-family:var(--ff);font-size:clamp(2.5rem,6vw,5rem);font-weight:400;line-height:1.1;margin-bottom:1.25rem;color:var(--cream);text-shadow:0 2px 30px rgba(14,12,10,0.9)}
.scene-hero__h1 em{font-style:italic;color:var(--ember)}
.scene-hero__sub{font-size:clamp(0.9rem,1.2vw,1.05rem);font-weight:300;color:var(--cream);max-width:500px;margin:0 auto 2.5rem;line-height:1.85;text-shadow:0 1px 20px rgba(14,12,10,0.95)}
.scene-hero__eyebrow{animation:heroIn 0.8s var(--out) 0.2s both}
.scene-hero__h1{animation:heroIn 0.9s var(--out) 0.35s both}
.scene-hero__sub{animation:heroIn 0.9s var(--out) 0.5s both}
.scene-hero__acts{animation:heroIn 0.9s var(--out) 0.65s both}
.scene-hero__scroll{animation:heroIn 0.8s var(--out) 0.9s both}
.scene-hero .an,.scene-hero .an-d1,.scene-hero .an-d2,.scene-hero .an-d3{opacity:1;transform:none}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ═══ BILINGUAL — display:none, ništa više ═══ */
/* Inline po defaultu (za nav, gumbe, tagline) */
.t-hr,.t-en{display:inline}

/* t-hr/t-en na block elementima (p, h1, h2) — display je već block, ništa ne treba */

[data-lang="hr"] .t-en{display:none!important}
[data-lang="en"] .t-hr{display:none!important}

/* Navbar linkovi — zasebni <a> tagovi s t-hr/t-en klasom direktno */
[data-lang="hr"] .fnav__link.t-en,
[data-lang="hr"] .fnav__rez.t-en,
[data-lang="hr"] .fs-menu__item.t-en{display:none!important}
[data-lang="en"] .fnav__link.t-hr,
[data-lang="en"] .fnav__rez.t-hr,
[data-lang="en"] .fs-menu__item.t-hr{display:none!important}

/* ═══ DEMO BAR ═══ */
.demo-bar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:99999;
  background:var(--ember);
  color:var(--char);
  font-family:var(--fm);
  font-size:0.62rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  padding:8px 1rem;
  height:36px;
}
.demo-bar__btn{
  background:var(--char);
  color:var(--ember);
  padding:4px 14px;
  border-radius:999px;
  font-weight:600;
  white-space:nowrap;
  transition:opacity 0.2s;
}
.demo-bar__btn:hover{opacity:0.8}
/* Pomakni navbar i letterbox zbog demo bara */
.fnav{top:calc(clamp(20px,3vh,36px) + 36px)!important}
.letterbox--top{top:36px}