/* ===== Effects layer: 3D icons, hero depth, reveal, tilt, before/after ===== */
:root{--glow-a:rgba(198,156,109,.42);--glow-b:rgba(110,139,61,.30);--shine:rgba(255,255,255,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glow-a:rgba(201,154,108,.28);--glow-b:rgba(185,208,142,.16);--shine:rgba(255,255,255,.18)}}
:root[data-theme="dark"]{--glow-a:rgba(201,154,108,.28);--glow-b:rgba(185,208,142,.16);--shine:rgba(255,255,255,.18)}

/* hero atmosphere */
.hero{position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none;animation:drift 14s ease-in-out infinite alternate}
.hero::before{width:520px;height:520px;background:var(--glow-a);top:-160px;right:-80px}
.hero::after{width:420px;height:420px;background:var(--glow-b);bottom:-200px;left:-120px;animation-delay:-6s}
.hero .wrap{position:relative;z-index:1}
@keyframes drift{to{transform:translate(-40px,30px) scale(1.12)}}
.hero h1{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .lead{animation:rise .9s .12s cubic-bezier(.2,.7,.2,1) both}
.hero .cta-row{animation:rise .9s .22s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
.hero h1 em{background:linear-gradient(100deg,var(--wood-deep),var(--wood) 45%,var(--wood-deep));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}

/* 3D floor */
.floor-box{background:transparent;overflow:visible;perspective:1100px;min-height:460px}
.floor-3d{position:absolute;inset:0;border-radius:22px;overflow:hidden;transform-style:preserve-3d;transform:rotateX(var(--fx,14deg)) rotateY(var(--fy,-10deg)) rotateZ(2deg);transition:transform .5s cubic-bezier(.2,.7,.2,1);box-shadow:0 40px 80px -30px rgba(40,24,10,.55),0 0 0 1px rgba(0,0,0,.05)}
.floor-3d canvas,.floor-3d .hero-photo{position:absolute;inset:0;width:100%;height:100%}
.floor-3d .hero-photo{object-fit:cover;max-width:none}
.floor-3d::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,var(--shine) 48%,transparent 62%);background-size:250% 100%;animation:sweep 5.5s ease-in-out infinite;mix-blend-mode:soft-light}
@keyframes sweep{0%,30%{background-position:120% 0}100%{background-position:-120% 0}}
.floor-tag{z-index:3}

/* exploded laminate layers */
.layers{position:absolute;right:-6px;top:-28px;width:230px;z-index:4;pointer-events:none;filter:drop-shadow(0 22px 22px rgba(30,18,8,.35))}
.layers .scene{height:190px;perspective:700px;display:grid;place-items:center}
.layers .stack{position:relative;width:150px;height:96px;transform-style:preserve-3d;transform:rotateX(62deg) rotateZ(-38deg);animation:spinz 18s linear infinite}
@keyframes spinz{to{transform:rotateX(62deg) rotateZ(322deg)}}
.layers .ly{position:absolute;inset:0;border-radius:6px;transform:translateZ(calc(var(--i)*var(--gap,18px)));transition:transform .6s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.layers .ly.l0{background:linear-gradient(135deg,#5E7F36,#3B5420)}
.layers .ly.l1{background:repeating-linear-gradient(90deg,#8a6a4c 0 3px,#7a5b40 3px 5px)}
.layers .ly.l2{background:repeating-linear-gradient(0deg,#C69C6D 0 6px,#B4875A 6px 7px,#D3AC7F 7px 13px,#a87c52 13px 14px)}
.layers .ly.l3{background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.15));backdrop-filter:blur(2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.layers ol{list-style:none;margin:0;padding:10px 12px;display:grid;gap:5px;background:rgba(20,16,12,.78);color:#F3EDE5;border-radius:12px;font-size:12px;counter-reset:ly}
.layers li{display:flex;gap:8px;align-items:center}
.layers li i{width:10px;height:10px;border-radius:3px;flex:none}
.floor-box:hover .ly{--gap:28px}
@media (max-width:860px){.layers{right:8px;top:8px;width:170px}.layers .scene{height:130px}.layers .stack{width:110px;height:70px}.floor-box{min-height:320px}}
@media (max-width:480px){.layers ol{display:none}}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--surface);padding-block:16px}
.marquee .track{display:flex;gap:42px;width:max-content;animation:mq 38s linear infinite}
.marquee span{font-family:var(--f-display);font-weight:700;font-size:clamp(18px,2.4vw,26px);white-space:nowrap;display:flex;align-items:center;gap:42px;color:var(--ink)}
.marquee span::after{content:"";width:12px;height:12px;border-radius:3px;background:var(--wood);transform:rotate(45deg)}
.marquee span:nth-child(3n+2){color:transparent;-webkit-text-stroke:1.2px var(--ink)}
@keyframes mq{to{transform:translateX(-50%)}}

/* 3D icons */
.i3d{width:64px;height:64px;flex:none;display:block;filter:drop-shadow(0 12px 14px rgba(30,20,10,.22));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.i3d.sm{width:46px;height:46px}
.feat:hover .i3d,.step:hover .i3d,.aud div:hover .i3d,.cert:hover .i3d{transform:translateY(-6px) rotate(-6deg) scale(1.06)}
.i3d .fl{animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-1.5px)}}
.feat{position:relative;overflow:hidden;transform-style:preserve-3d}
.feat .k{font-size:15px;letter-spacing:.06em;color:var(--muted);font-family:var(--f-body);font-weight:700}
.aud div{align-items:center}
.aud div>svg:not(.i3d){display:none}
.step{border-top:0;padding-top:0}
.step .head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.step .n{font-family:var(--f-display);font-weight:800;font-size:44px;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--muted)}
.gifts li b{display:none}
.gifts li .i3d{width:52px;height:52px}
.cert .i3d{margin-bottom:4px}

/* tilt + shine on cards */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .25s ease-out,box-shadow .3s;will-change:transform}
.tilt:hover{box-shadow:0 30px 60px -28px rgba(30,20,10,.45)}
.tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),var(--shine),transparent 40%);opacity:0;transition:opacity .3s;z-index:2;mix-blend-mode:soft-light}
.tilt:hover::before{opacity:1}
.card{position:relative}
.card .swatch canvas,.card .swatch img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .swatch canvas,.card:hover .swatch img{transform:scale(1.07)}

/* buttons */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:hover::after{left:120%}
.btn-primary{box-shadow:0 10px 24px -10px var(--accent)}
.wa-float{animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5),0 8px 24px rgba(0,0,0,.25)}70%{box-shadow:0 0 0 18px rgba(37,211,102,0),0 8px 24px rgba(0,0,0,.25)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0),0 8px 24px rgba(0,0,0,.25)}}

/* before / after */
.ba{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/7;max-width:100%;margin-bottom:22px;user-select:none;touch-action:pan-y;background:var(--surface-2)}
.ba canvas,.ba img{position:absolute;inset:0;width:100%;height:100%}
.ba img{object-fit:cover;max-width:none}
.ba .after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .bar{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.4);pointer-events:none}
.ba .knob{position:absolute;top:50%;left:var(--pos,50%);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;color:#4E6B2E;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none}
.ba .lab{position:absolute;top:14px;background:rgba(20,16,12,.78);color:#F3EDE5;padding:7px 12px;border-radius:10px;font-size:13px;font-weight:600}
.ba .lab.l{left:14px}.ba .lab.r{right:14px;background:#4E6B2E}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
@media (max-width:600px){.ba{aspect-ratio:4/3}}

/* reveal (only for elements below the first screen) */
.rv{opacity:0;transform:translateY(28px) scale(.98)}
.rv.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}

/* section headings accent */
.sec-head h2{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:8px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--wood) 0 5px,var(--wood-deep) 5px 6px)}

/* offer glow */
.offer{position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.08),transparent 30%);animation:spin 16s linear infinite}
.offer .wrap{position:relative}
@keyframes spin{to{transform:rotate(360deg)}}
.countdown div{backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}

@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.layers .stack{animation:none}.marquee .track{animation:none}}

.floor-3d .hero-photo{object-position:center 72%}
.works{grid-auto-flow:dense}
.work:last-child:nth-child(8){grid-column:span 2;aspect-ratio:auto;min-height:220px}
.work img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.work:hover img{transform:scale(1.06)}