/* ============ anim.css: movement, bigger page headers, skill photos, floating buttons ============
   Loaded after site.css and shop.css, so it can refine them. */

[hidden]{display:none !important;}

/* ---------- page headers: taller, less zoomed ---------- */
.story-hero{min-height:clamp(520px,86vh,860px);}
.story-hero img.kb{inset:auto 0 0 0; top:-90px; height:calc(100% + 90px); object-position:center 38%; animation:kbSoft 22s ease-out both; translate:0 var(--py,0px);}
@keyframes kbSoft{from{transform:scale(1.05);}to{transform:scale(1);}}
.story-hero{align-items:flex-end;}
.story-hero .wrap{padding-top:130px; padding-bottom:70px;}
.story-hero .ov{background:linear-gradient(180deg,rgba(9,17,40,.5) 0%,rgba(9,17,40,.04) 30%,rgba(9,17,40,.22) 55%,rgba(9,17,40,.92) 100%);}
.hero-photo-bg{min-height:clamp(700px,100vh,920px);}
.hero-bg-img .sl.active::before{animation:kb3 9s ease-out both;}
@keyframes kb3{from{transform:scale(1.04);}to{transform:scale(1);}}
@media (min-width:641px){ .hero-grid-full{padding-bottom:140px;} }
@media (max-width:640px){
  .hero-bg-img{padding-top:78%;}
  .hero-photo-bg .hero-dots{top:calc(64px + 78vw - 56px); bottom:auto;}
  .hero-arrow{top:calc(64px + 39vw - 17px);}
}

/* ---------- about page map: smaller ---------- */
.map-card{max-width:520px; margin-left:auto; margin-right:auto;}
.map-card .mp{aspect-ratio:auto; height:190px; min-height:0;}
.map-card .mb{padding:12px 16px; gap:10px; font-size:.9rem;}
.map-card .mb .btn{padding:9px 16px; font-size:.82rem;}
@media (max-width:760px){ .map-card .mp{aspect-ratio:auto; height:170px;} }

/* ---------- skills: the photo is the big button, the icon is small ---------- */
.skill-card.has-ph{padding:0; overflow:hidden; display:flex; flex-direction:column; color:inherit; text-decoration:none; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
.skill-card.has-ph.tilting{transition:transform .08s linear, box-shadow .25s;}
.skill-card.has-ph:hover{transform:translateY(-8px) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
.sk-ph{position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden; border:0; padding:0; margin:0; background:#0F2047; cursor:pointer; font:inherit;}
.sk-ph img{width:100%; height:100%; object-fit:cover; object-position:center 30%; transition:transform 1s cubic-bezier(.2,.7,.2,1); transform:scale(1.001);}
.skill-card.has-ph:hover .sk-ph img{transform:scale(1.09);}
.sk-ph::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,17,40,0) 55%,rgba(9,17,40,.55) 100%); pointer-events:none;}
.sk-ph .tile.sm{position:absolute; left:16px; bottom:14px; width:44px; height:44px; border-radius:13px; z-index:2; display:grid; place-items:center; box-shadow:0 8px 18px rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.9); animation:bob 3.6s ease-in-out infinite;}
.sk-ph .tile.sm svg{width:24px; height:24px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; overflow:visible;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.sk-zoom{position:absolute; right:14px; bottom:14px; z-index:2; background:rgba(255,255,255,.92); color:#12203F; font:700 .76rem 'Inter',sans-serif; padding:6px 12px; border-radius:999px; opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s;}
.sk-ph:hover .sk-zoom,.sk-ph:focus-visible .sk-zoom{opacity:1; transform:none;}
.sk-tx{padding:20px 22px 24px; display:flex; flex-direction:column; flex:1;}
.sk-tx h3{margin-top:0; font-size:1.12rem;}
.sk-tx p{margin-top:8px;}
.sk-more{margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.88rem; color:var(--red);}
.sk-more svg{width:15px; height:15px; transition:transform .25s;}
.skill-card.has-ph:hover .sk-more svg{transform:translateX(5px);}
.sk-big .skill-card.has-ph{padding:0;}
@media (max-width:640px){
  .skill-card.has-ph{display:flex; grid-template-columns:none; padding:0;}
  .skill-card.has-ph .tile{grid-row:auto;}
  .sk-big .skill-card.has-ph{display:flex;}
  .sk-ph{aspect-ratio:16/11;}
}
.sk-fig{position:relative; cursor:pointer; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
.sk-fig figcaption{position:absolute; left:0; right:0; bottom:0; padding:30px 16px 14px; background:linear-gradient(180deg,rgba(9,17,40,0),rgba(9,17,40,.82)); color:#fff; font:700 .95rem 'Sora',sans-serif;}
.gal figure.sk-fig{border:0; display:block;}
.gal figure.sk-fig:hover{transform:translateY(-5px) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}

/* home hero 4th slide: moving photo cards with small icons */
.sl.skills{background:linear-gradient(135deg,#0F2047,#1A3365 55%,#003ECD);}
.sk-art{gap:22px; right:6%; top:36%;}
.sk-art .skp{position:relative; width:clamp(130px,13vw,200px); aspect-ratio:3/4; border-radius:24px; overflow:hidden; box-shadow:0 26px 54px rgba(0,0,0,.45); border:3px solid rgba(255,255,255,.85); animation:floaty 5s ease-in-out infinite; background:#0F2047;}
.sk-art .skp:nth-child(1){transform:rotate(-4deg); animation-delay:0s;}
.sk-art .skp:nth-child(2){animation-delay:.7s; margin-top:34px;}
.sk-art .skp:nth-child(3){transform:rotate(4deg); animation-delay:1.4s;}
.sk-art .skp img{width:100%; height:100%; object-fit:cover; object-position:center;}
.sk-art .skp .tile.sm{position:absolute; left:12px; bottom:12px; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; box-shadow:0 6px 14px rgba(0,0,0,.4); border:2px solid #fff; animation:none;}
.sk-art .skp .tile.sm svg{width:22px; height:22px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; overflow:visible;}
@media (max-width:640px){
  .sk-art{gap:8px; left:50%; right:auto; top:46%;}
  .sk-art .skp{width:26vw; border-width:2px; border-radius:16px;}
  .sk-art .skp:nth-child(2){margin-top:20px;}
  .sk-art .skp .tile.sm{width:28px; height:28px; border-radius:9px; left:6px; bottom:6px; border-width:1.5px;}
  .sk-art .skp .tile.sm svg{width:16px; height:16px;}
}

/* ---------- photo viewer ---------- */
.photo-box{position:fixed; inset:0; z-index:400; display:grid; place-items:center; background:rgba(5,10,26,.88); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .3s; padding:20px;}
.photo-box.open{opacity:1; pointer-events:auto;}
.photo-box img{max-width:min(1100px,96vw); max-height:88vh; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.6); transform:scale(.92); transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.photo-box.open img{transform:none;}
.pb-x{position:absolute; top:16px; right:18px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:1.7rem; line-height:1; display:grid; place-items:center;}
.pb-x:hover{background:var(--red);}

/* ---------- shop photos ---------- */
.shop-art.photo{background:#EEF1F8; overflow:hidden;}
.shop-art.photo img.pimg{width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.2,1); cursor:zoom-in;}
.shop-card:hover .shop-art.photo img.pimg{transform:scale(1.07);}
a.shop-card .shop-art.photo img.pimg{cursor:pointer;}
.shop-card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
.shop-card.tilting{transition:transform .08s linear, box-shadow .25s, border-color .25s;}
.shop-card:hover{transform:translateY(-6px) perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
.shop-price-tag{background:var(--red);}
.shop-art{overflow:hidden;}
.shop-art > svg{animation:itemFloat 5s ease-in-out infinite;}
@keyframes itemFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

/* ---------- floating buttons: TikTok above WhatsApp ---------- */
.float-stack{position:fixed; right:16px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:14px; pointer-events:none;}
.float-stack > a{pointer-events:auto;}
.float-stack .wa-float{position:relative; right:auto; bottom:auto;}
.tt-float{display:flex; align-items:center; gap:10px; text-decoration:none; animation:waIn .8s .8s cubic-bezier(.2,1.4,.4,1) both;}
.tt-fbtn{position:relative; width:58px; height:58px; border-radius:50%; background:#0b0b10; display:grid; place-items:center; box-shadow:0 10px 26px rgba(254,44,85,.45); animation:waBounce 5s 2s infinite;}
.tt-fbtn::before,.tt-fbtn::after{content:''; position:absolute; inset:0; border-radius:50%; border:3px solid #FE2C55; animation:waRing 2.4s ease-out infinite;}
.tt-fbtn::after{border-color:#25F4EE; animation-delay:1.2s;}
.tt-fbtn svg{width:30px; height:30px; fill:#fff; position:relative; z-index:1; filter:drop-shadow(-1.6px -1.6px 0 #25F4EE) drop-shadow(1.6px 1.6px 0 #FE2C55);}
.tt-tip{background:#fff; color:#12203F; font-weight:700; font-size:.88rem; padding:10px 16px; border-radius:999px; box-shadow:0 8px 22px rgba(0,0,0,.18); white-space:nowrap; overflow:hidden; max-width:0; opacity:0; padding-left:0; padding-right:0; animation:ttTip 14s 5s infinite;}
.tt-float:hover .tt-tip,.tt-float:focus-visible .tt-tip{max-width:220px; opacity:1; padding-left:16px; padding-right:16px; animation:none;}
.tt-float:active .tt-fbtn{transform:scale(.92);}
@keyframes ttTip{0%{max-width:0; opacity:0; padding:10px 0;} 5%,32%{max-width:220px; opacity:1; padding:10px 16px;} 40%,100%{max-width:0; opacity:0; padding:10px 0;}}
.wa-tip{overflow:hidden;}
@media (max-width:640px){
  .float-stack{right:12px; gap:12px;}
  .tt-fbtn,.wa-float .wa-btn{width:52px; height:52px;}
  .wa-float svg{width:28px; height:28px;} .tt-fbtn svg{width:26px; height:26px;}
  .shop-bar{bottom:calc(86px + env(safe-area-inset-bottom,0px));}
}
@media (prefers-reduced-motion:reduce){ .tt-float,.tt-fbtn,.tt-fbtn::before,.tt-fbtn::after,.tt-tip{animation:none;} .tt-fbtn::before,.tt-fbtn::after{display:none;} }

/* ---------- movement ---------- */
#scrollBar{position:fixed; top:0; left:0; right:0; height:3px; z-index:210; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--red),var(--gold)); pointer-events:none;}
.an{opacity:0; transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0ms); will-change:transform,opacity;}
.an[data-an="up"]{transform:translate3d(0,38px,0);}
.an[data-an="left"]{transform:translate3d(-56px,0,0);}
.an[data-an="right"]{transform:translate3d(56px,0,0);}
.an[data-an="zoom"]{transform:scale(.86);}
.an.an-in{opacity:1; transform:none;}

.words .w{display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 .02em .14em; margin-bottom:-.14em;}
.words .w > i{display:inline-block; font-style:normal; transform:translateY(112%) rotate(4deg); opacity:0; transition:transform .85s cubic-bezier(.2,.8,.2,1) var(--wd,0ms), opacity .7s ease var(--wd,0ms);}
.words.in .w > i{transform:none; opacity:1;}

.btn-primary{position:relative; overflow:hidden;}
.btn-primary::after{content:''; position:absolute; top:0; left:-70%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-20deg); animation:shine 5s 1.5s ease-in-out infinite; pointer-events:none;}
@keyframes shine{0%,55%{left:-70%;} 80%,100%{left:140%;}}
.btn{transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;}
.btn:active{transform:scale(.96);}

.kicker svg{animation:kickPulse 3s ease-in-out infinite;}
@keyframes kickPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.25);}}

.cta-banner::before{content:''; position:absolute; width:520px; height:520px; right:-120px; top:-260px; border-radius:50%; background:radial-gradient(circle,rgba(255,187,0,.35),rgba(255,187,0,0) 65%); animation:drift1 14s ease-in-out infinite; pointer-events:none;}
.cta-banner::after{content:''; position:absolute; width:420px; height:420px; left:-100px; bottom:-240px; border-radius:50%; background:radial-gradient(circle,rgba(255,67,67,.35),rgba(255,67,67,0) 65%); animation:drift2 16s ease-in-out infinite; pointer-events:none;}
.cta-banner .wrap{position:relative; z-index:1;}

.news-thumb{overflow:hidden; background-size:cover; transition:background-size .8s;}
.news-card:hover .news-thumb{background-size:112%;}
.news-card,.step-card,.testi-card,.pillar,.gcard,.gallery-card{transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;}
.news-card:hover,.step-card:hover,.testi-card:hover,.pillar:hover{transform:translateY(-7px); box-shadow:var(--shadow);}
.step-card .step-num{transition:transform .4s cubic-bezier(.3,1.6,.5,1);}
.step-card:hover .step-num{transform:scale(1.18) rotate(-6deg);}
.pillar .p-icon{transition:transform .5s cubic-bezier(.3,1.6,.5,1);}
.pillar:hover .p-icon{transform:rotate(-8deg) scale(1.12);}
.field input,.field select,.field textarea{transition:border-color .25s, box-shadow .25s, transform .25s;}
.field input:focus,.field select:focus,.field textarea:focus{transform:translateY(-1px);}
.nav-inner .links a{position:relative;}
.nav-inner .links a::after{content:''; position:absolute; left:50%; right:50%; bottom:-4px; height:2px; background:var(--gold); transition:left .3s, right .3s;}
.nav-inner .links a:hover::after,.nav-inner .links a.active::after{left:12%; right:12%;}

@media (prefers-reduced-motion:reduce){
  .an,.words .w > i{opacity:1 !important; transform:none !important; transition:none !important;}
  .btn-primary::after,.kicker svg,.cta-banner::before,.cta-banner::after,.sk-ph .tile.sm,.sk-art .skp,.shop-art > svg{animation:none;}
  #scrollBar{display:none;}
}

/* news cards: photos need room to be seen */
.news-thumb{height:190px;}
#news-teaser .news-thumb{height:170px;}
.news-grid{grid-template-columns:repeat(3,1fr);}
@media (max-width:960px){ .news-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .news-grid{grid-template-columns:1fr;} .news-thumb,#news-teaser .news-thumb{height:200px;} }
.news-thumb{background-position:center 30%;}


/* ============ FADED PHOTO EDGES + FADE-IN (phone and desktop) ============
   Header photos fade in when the page opens, and their edges melt into the page. */
@keyframes photoIn{from{opacity:0;}to{opacity:1;}}
.story-hero{background:#0B1226;}
.story-hero img.kb{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
  animation:kbSoft 22s ease-out both, photoIn 1.4s ease-out both;
}
.story-hero::after{content:''; position:absolute; left:0; right:0; bottom:0; height:64px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,18,38,0),var(--bg));}
.story-hero::before{content:''; position:absolute; left:0; right:0; top:0; height:90px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,18,38,.7),rgba(11,18,38,0));}
.story-hero .wrap{z-index:2;}
@media (max-width:640px){
  .story-hero{display:flex; align-items:flex-end; min-height:clamp(400px,66vh,560px); padding-top:0;}
  .story-hero img.kb{position:absolute; inset:0; top:0; width:100%; height:100%; max-height:none; min-height:0; object-position:center 30%;
    animation:kbSoft 18s ease-out both, photoIn 1.4s ease-out both; translate:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);}
  .story-hero .ov{display:block; background:linear-gradient(180deg,rgba(11,18,38,.55) 0%,rgba(11,18,38,.05) 28%,rgba(11,18,38,.35) 58%,rgba(11,18,38,.94) 100%);}
  .story-hero .wrap{padding-top:96px; padding-bottom:60px;}
  .story-hero h1{font-size:clamp(1.9rem,8vw,2.4rem);}
  /* home hero: photo fades in and melts into the page */
  .hero-bg-img{animation:photoIn 1.4s ease-out both; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 100%); mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 100%);}
  .hero-bg-img::after{background:linear-gradient(0deg,#0F2047 0%,rgba(15,32,71,.6) 22%,rgba(15,32,71,0) 55%),linear-gradient(180deg,rgba(11,18,38,.5),rgba(11,18,38,0) 22%) !important;}
  /* every other photo: soft edges and a fade as it scrolls in */
  .news-thumb,.sk-ph,.shop-art.photo,.gal figure img,.about-photo,.life-more img{border-radius:16px;}
  .news-thumb::after,.sk-ph::after{content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(11,18,38,0) 55%,rgba(11,18,38,.35) 100%);}
  .news-thumb,.sk-ph{position:relative;}
}
@media (prefers-reduced-motion:reduce){ .story-hero img.kb,.hero-bg-img{animation:none !important;} }