/* Loom Briar atmosphere + polish */
:root{--firefly:#f7e7a0;--panel-soft:rgba(6,15,11,.88);--edge:rgba(212,174,105,.22)}
body{cursor:none;background:#020504}
a,button,input,textarea,select,label{cursor:none}

/* Cursor */
.briar-cursor{position:fixed;left:0;top:0;width:11px;height:11px;border:1px solid rgba(247,231,160,.86);border-radius:50%;pointer-events:none;z-index:2000;transform:translate(-50%,-50%);box-shadow:0 0 7px rgba(247,231,160,.65),0 0 15px rgba(173,217,124,.38);transition:width .15s,height .15s,background .15s,opacity .15s}
.briar-cursor:after{content:"";position:absolute;inset:3px;border-radius:50%;background:#f7e7a0;box-shadow:0 0 9px #f7e7a0}
.briar-cursor.hover{width:20px;height:20px;background:rgba(109,151,82,.12)}

/* Fireflies */
.firefly-field{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.firefly{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--firefly);box-shadow:0 0 6px 2px rgba(247,231,160,.62),0 0 15px 4px rgba(152,204,94,.22);animation:fly var(--dur) ease-in-out infinite alternate,blink 3.2s ease-in-out infinite;opacity:.58}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) scale(.78)}}
@keyframes blink{0%,100%{opacity:.12}45%,65%{opacity:.78}}

/* Overall spacing and hierarchy */
.story-section,.floor-section,.magic-section,.pawdrey-section,.journal-section,.contact-section,.briar-clock-section{scroll-margin-top:92px}
.section-heading{max-width:760px!important;margin-bottom:42px!important}
.section-heading h2{font-size:clamp(2.7rem,5vw,5.2rem)!important}
.story-section,.floor-section,.magic-section,.pawdrey-section,.journal-section,.contact-section{padding-top:clamp(72px,8vw,112px)!important;padding-bottom:clamp(72px,8vw,112px)!important}

/* Header */
.site-header{height:76px!important;background:rgba(3,8,6,.94)!important;border-bottom:1px solid var(--edge)!important}
.brand img{width:50px!important;height:50px!important;object-position:center!important}
.site-nav{gap:18px!important;font-size:.82rem!important}
.site-nav a{padding-block:8px}

/* Gate + hero: keep Pawdrey visible and reduce crop */
.gate-copy{padding-top:90px!important}
.gate-copy h1{font-size:clamp(3.6rem,7vw,7rem)!important}
.gate-crow{max-width:280px!important;opacity:.82!important}
.hero{min-height:min(880px,calc(100svh - 76px))!important}
.hero-art{background-position:center 26%!important;filter:saturate(.9) contrast(1.02) brightness(.9)!important}
.hero-shade{background:linear-gradient(90deg,rgba(1,3,2,.87) 0%,rgba(1,3,2,.54) 36%,rgba(1,3,2,.08) 68%),linear-gradient(180deg,rgba(1,3,2,.03) 50%,rgba(1,4,3,.72))!important}
.hero-copy{padding-block:62px!important}
.hero-copy h2{font-size:clamp(4.4rem,8.5vw,8.5rem)!important;line-height:.79!important}
.hero-note{right:4vw!important;bottom:3vh!important}

/* Moss is visible, but text stays readable */
.floor-section{background:linear-gradient(rgba(2,6,4,.42),rgba(2,6,4,.62)),url("assets/moss-clearing.jpg") center/cover fixed!important;box-shadow:inset 0 65px 110px rgba(27,62,30,.16)}
.moss-backdrop{filter:saturate(1.12) brightness(1.04)!important}

/* Product cards */
.feature-product{max-width:1120px!important;min-height:500px!important;margin-bottom:42px!important;border-color:var(--edge)!important;border-radius:4px 30px 4px 30px!important;background:rgba(4,10,7,.91)!important;box-shadow:0 22px 55px rgba(0,0,0,.42)!important}
.feature-copy{padding:clamp(28px,5vw,58px)!important}
.feature-copy h3{font-size:clamp(2.4rem,4vw,3.5rem)!important}
.feature-image img{max-height:620px;object-position:center}
.price{font-size:1.8rem!important}

/* Pawdrey */
.pawdrey-section{gap:48px!important;max-width:1280px;margin-inline:auto}
.pawdrey-image img{object-fit:contain;object-position:center top;max-height:620px}
.pawdrey-copy{max-width:560px}

/* Briar Clock — antique woodland cuckoo clock */
.briar-clock-section{padding:74px clamp(22px,7vw,96px);background:radial-gradient(circle at 50% 6%,rgba(73,104,58,.2),transparent 36%),linear-gradient(180deg,#030806,#020504);border-top:1px solid rgba(212,174,105,.14);text-align:center;overflow:hidden}
.briar-clock-section>.section-heading{margin-inline:auto}
.briar-clock{position:relative;width:min(255px,76vw);height:342px;margin:18px auto 0;filter:drop-shadow(0 24px 34px rgba(0,0,0,.58))}
.clock-house{position:absolute;left:50%;top:56px;width:194px;height:250px;transform:translateX(-50%);background:linear-gradient(90deg,#1b120d 0%,#362216 22%,#57341f 50%,#362216 78%,#1b120d 100%);clip-path:polygon(50% 0,93% 22%,87% 100%,13% 100%,7% 22%);border:1px solid rgba(174,126,72,.28);border-radius:8px;box-shadow:inset 0 0 0 2px rgba(18,10,6,.55),inset 0 0 32px rgba(0,0,0,.35)}
.clock-house:before{content:"";position:absolute;left:14px;right:14px;top:-9px;height:30px;border-radius:60% 60% 20% 20%;background:linear-gradient(180deg,#42522f,#27331f 58%,#172016);box-shadow:0 5px 0 rgba(18,29,17,.7),0 0 15px rgba(98,130,66,.22);transform:rotate(-1deg)}
.clock-house:after{content:"";position:absolute;left:23px;right:23px;bottom:16px;height:22px;background:repeating-linear-gradient(90deg,rgba(122,86,48,.25) 0 8px,rgba(59,38,22,.25) 8px 16px);border-radius:50%;opacity:.55}
.clock-face{position:absolute;left:50%;top:144px;transform:translateX(-50%);width:108px;height:108px;border-radius:50%;background:radial-gradient(circle at 48% 42%,#efe2bd 0%,#d9c49a 58%,#b3986f 100%);border:6px solid #4a2e1b;box-shadow:0 0 0 2px #8c6838,inset 0 0 0 2px rgba(255,244,210,.42),0 5px 18px rgba(0,0,0,.4);color:#21170f}
.clock-face:before,.clock-face:after{content:"";position:absolute;left:50%;bottom:50%;transform-origin:bottom;width:3px;border-radius:3px;background:#21160f;box-shadow:0 0 1px rgba(255,255,255,.1)}
.clock-face:before{height:31px;transform:rotate(18deg)}.clock-face:after{height:40px;transform:rotate(112deg)}
.clock-door{position:absolute;left:50%;top:83px;transform:translateX(-50%);width:66px;height:48px;border:4px solid #4f321f;border-radius:34px 34px 6px 6px;background:radial-gradient(circle at 50% 70%,#090706,#120d09 70%);box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 0 13px #000;overflow:visible}
.clock-door:before,.clock-door:after{content:"";position:absolute;top:0;width:50%;height:100%;background:linear-gradient(90deg,#2c1c12,#4b2f1c);border:1px solid #6f4a2d;transition:transform .45s ease;box-shadow:inset 0 0 8px rgba(0,0,0,.35)}.clock-door:before{left:0;transform-origin:left}.clock-door:after{right:0;transform-origin:right}
.briar-clock.awake .clock-door:before{transform:perspective(100px) rotateY(-74deg)}.briar-clock.awake .clock-door:after{transform:perspective(100px) rotateY(74deg)}
.clock-crow{position:absolute;left:50%;top:94px;width:52px;height:35px;transform:translate(-50%,10px) scale(.38);opacity:0;transition:.48s cubic-bezier(.2,.9,.2,1.2);z-index:3;filter:drop-shadow(0 4px 4px rgba(0,0,0,.55))}
.clock-crow:before{content:"";position:absolute;width:34px;height:25px;border-radius:58% 42% 50% 50%;background:linear-gradient(135deg,#070909,#111616);box-shadow:16px 7px 0 -7px #0a0d0d}
.clock-crow:after{content:"";position:absolute;right:-11px;top:7px;border-left:15px solid #9d7330;border-top:4px solid transparent;border-bottom:4px solid transparent}
.briar-clock.awake .clock-crow{opacity:1;transform:translate(-50%,-22px) scale(1)}
.clock-pendulum{position:absolute;left:50%;top:246px;width:2px;height:70px;background:linear-gradient(#8b6539,#ba8a4d);transform-origin:top;animation:pendulum 2.3s ease-in-out infinite alternate;box-shadow:0 0 2px rgba(255,224,159,.22)}
.clock-pendulum:after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 45% 35%,#c9a26a,#846039 68%,#4c331f);box-shadow:0 3px 7px rgba(0,0,0,.45)}
@keyframes pendulum{to{transform:rotate(8deg)}}
.clock-button{margin-top:8px!important;background:rgba(44,31,20,.66)!important;border-color:rgba(190,148,84,.38)!important;box-shadow:inset 0 0 18px rgba(212,174,105,.05)}
.clock-button:hover{background:rgba(67,44,26,.78)!important}
.ferret-faucet{max-width:720px;margin:42px auto 0;padding:24px 26px;border:1px solid rgba(212,174,105,.2);border-radius:4px 24px;background:rgba(7,16,12,.72);text-align:left}.ferret-faucet h3{font-size:2rem!important}.ferret-mark{font-size:2rem;float:left;margin-right:12px}

/* Journal + contact */
.journal-grid{max-width:1080px!important;gap:18px!important}.journal-card{padding:26px!important;border-color:var(--edge)!important;background:linear-gradient(155deg,rgba(10,21,16,.9),rgba(3,8,6,.94))!important}.journal-card h3{font-size:1.95rem!important}
.contact-section{max-width:1280px;margin-inline:auto}.contact-form{border-color:var(--edge)!important;background:rgba(7,16,12,.88)!important}

/* The Briar Thread — subtle page guide */
.briar-thread{position:fixed;left:clamp(6px,1.5vw,20px);top:80px;width:58px;height:calc(100vh - 96px);z-index:44;pointer-events:none;opacity:0;transition:opacity .9s ease}.briar-thread.loose{opacity:.78}
.briar-thread-line{position:absolute;left:28px;top:0;width:2px;height:var(--thread-length,0%);max-height:calc(100% - 30px);border-radius:50%;background:linear-gradient(90deg,#24170e,#76502c 48%,#24170e);box-shadow:0 0 6px rgba(90,124,61,.18);transform-origin:top;transition:height .08s linear}
.briar-thread-line:before,.briar-thread-line:after{content:"";position:absolute;width:9px;height:4px;border-top:1px solid #50683a;transform:rotate(-38deg)}.briar-thread-line:before{left:-7px;top:24%}.briar-thread-line:after{left:1px;top:67%;transform:rotate(38deg)}
.thorn-spool{position:absolute;left:5px;top:var(--spool-y,0%);width:48px;height:48px;border-radius:50%;overflow:hidden;border:1px solid rgba(196,155,89,.62);background:#1a120c url("assets/thorn-spool-needle.jpg") center/cover no-repeat;box-shadow:0 5px 14px rgba(0,0,0,.55),0 0 10px rgba(99,132,68,.16);transform:rotate(var(--spool-rotate,0deg));transition:top .08s linear;will-change:top,transform}
.thorn-spool:after{content:"";position:absolute;inset:12px;border-radius:50%;border:2px solid rgba(225,194,137,.42);box-shadow:inset 0 0 7px #000}
.spool-crow-nudge{position:absolute;left:34px;top:-22px;width:22px;height:16px;background:#080b0a;border-radius:55% 45% 50% 50%;opacity:0;transform:translate(20px,-10px) rotate(-12deg)}.spool-crow-nudge:after{content:"";position:absolute;right:-7px;top:5px;border-left:9px solid #a87a35;border-top:3px solid transparent;border-bottom:3px solid transparent}.briar-thread.loose .spool-crow-nudge{animation:spoolCrow 1.45s ease-out forwards}
@keyframes spoolCrow{0%{opacity:0;transform:translate(28px,-18px) rotate(-12deg)}25%,58%{opacity:1}72%{opacity:1;transform:translate(2px,6px) rotate(8deg)}100%{opacity:0;transform:translate(-22px,-18px) rotate(-16deg)}}

/* Buttons/forms */
.button,.enter-button{min-height:46px!important;padding-inline:1.2rem!important}
.contact-form input,.contact-form textarea,.contact-form select{background:#020705!important;border-color:rgba(212,174,105,.28)!important}

@media(max-width:980px){.site-header{height:72px!important}.hero{min-height:calc(100svh - 72px)!important}.story-section{gap:22px!important}.feature-product{max-width:760px!important}.pawdrey-section{gap:28px!important}.firefly-field{z-index:20}}
@media(max-width:700px){body,a,button,input,textarea,select,label{cursor:auto}.briar-cursor{display:none}.hero-art{background-position:58% 18%!important;background-size:cover!important}.hero-copy{padding:94px 18px 34px!important}.hero-copy h2{font-size:clamp(3.8rem,18vw,5.6rem)!important}.gate-copy{padding-top:74px!important}.gate-crow{width:150px!important;left:-26px!important;top:3vh!important}.briar-clock-section{padding:58px 18px}.briar-clock{width:min(230px,78vw);height:318px}.clock-house{width:176px;height:228px}.clock-face{top:137px;width:98px;height:98px}.clock-door{top:85px;width:60px;height:44px}.clock-pendulum{top:231px;height:62px}.briar-thread{left:0;width:38px;opacity:.42}.briar-thread-line{left:19px}.thorn-spool{width:34px;height:34px;left:2px}.thorn-spool:after{inset:9px;border-width:1px}.spool-crow-nudge{display:none}.floor-section{background-attachment:scroll!important}.journal-card{padding:22px!important}}
@media(prefers-reduced-motion:reduce){.firefly,.clock-pendulum,.spool-crow-nudge{animation:none}.briar-cursor{display:none}body{cursor:auto}.briar-thread{display:none}}

/* FINAL GATE CSS — deliberately higher specificity than injected overrides */
html body section#briarGate.briar-gate{background:#000302!important;overflow:hidden!important}
html body section#briarGate .gate-art{background-image:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.64) 100%),url("assets/moss-clearing.jpg")!important;background-position:42% 64%!important;background-size:cover!important;filter:brightness(.48) saturate(1.08) contrast(1.12)!important}
html body section#briarGate .gate-vignette{background:radial-gradient(ellipse at 57% 68%,rgba(255,229,151,.34) 0 5%,rgba(178,174,113,.16) 12%,transparent 30%),linear-gradient(100deg,rgba(0,0,0,.88) 0 18%,transparent 38% 72%,rgba(0,0,0,.9) 94%),linear-gradient(180deg,rgba(0,0,0,.18),transparent 36%,rgba(0,0,0,.42) 100%)!important}
html body section#briarGate.briar-gate:before{left:-17%!important;top:-17%!important;bottom:-15%!important;width:48%!important;transform:rotate(16deg)!important;background:radial-gradient(ellipse at 80% 16%,rgba(61,91,43,.88) 0 4%,transparent 5%),radial-gradient(ellipse at 88% 43%,rgba(78,110,52,.7) 0 3%,transparent 4%),linear-gradient(66deg,transparent 0 44%,#21160d 45% 51%,transparent 52%),linear-gradient(79deg,transparent 0 64%,#120c08 65% 70%,transparent 71%)!important;filter:drop-shadow(18px 8px 24px #000)!important}
html body section#briarGate.briar-gate:after{right:-14%!important;top:-8%!important;bottom:-18%!important;width:42%!important;transform:scaleX(-1) rotate(-18deg)!important;background:radial-gradient(ellipse at 79% 22%,rgba(68,99,48,.82) 0 4%,transparent 5%),radial-gradient(ellipse at 86% 57%,rgba(76,107,50,.68) 0 3%,transparent 4%),linear-gradient(72deg,transparent 0 47%,#1b120b 48% 54%,transparent 55%),linear-gradient(88deg,transparent 0 68%,#100b07 69% 74%,transparent 75%)!important;filter:drop-shadow(-18px 8px 24px #000)!important}
html body section#briarGate .gate-copy{margin:17vh 0 0 19vw!important;width:min(500px,68vw)!important;padding:22px 24px!important;text-align:left!important;transform:rotate(-1.8deg)!important;background:rgba(4,9,6,.18)!important;backdrop-filter:blur(1px)!important}
html body section#briarGate .gate-copy:before{top:-104px!important;left:51%!important;width:min(420px,62vw)!important;height:430px!important;opacity:.78!important;border:3px solid rgba(121,92,49,.72)!important;border-bottom:0!important;border-radius:47% 53% 4px 7px/31% 35% 4px 7px!important;background:repeating-linear-gradient(90deg,rgba(43,30,18,.18) 0 28px,rgba(94,63,34,.35) 29px 34px,rgba(24,17,11,.1) 35px 58px),radial-gradient(ellipse at 16% 25%,rgba(64,96,47,.58) 0 4%,transparent 5%),radial-gradient(ellipse at 84% 18%,rgba(79,108,51,.56) 0 4%,transparent 5%),radial-gradient(ellipse at 78% 74%,rgba(56,84,40,.5) 0 4%,transparent 5%),linear-gradient(180deg,rgba(27,20,12,.42),rgba(8,8,6,.14))!important;box-shadow:inset 0 0 55px rgba(0,0,0,.45),0 0 36px rgba(0,0,0,.5)!important}
html body section#briarGate .gate-copy:after{top:-78px!important;left:49%!important;color:rgba(220,185,116,.5)!important;font-size:.72rem!important;letter-spacing:.32em!important}
html body section#briarGate .gate-copy h1{font-size:clamp(3.4rem,6.4vw,5.8rem)!important;line-height:.82!important;color:#f0e2ba!important;text-shadow:0 4px 20px #000,0 0 28px rgba(240,214,148,.09)!important}
html body section#briarGate .gate-intro{max-width:410px!important;margin:1rem 0 1.35rem!important;color:#d0c4aa!important;font-size:clamp(1rem,1.6vw,1.18rem)!important}
html body section#briarGate .enter-button{margin-left:0!important;opacity:1!important;border:1px solid rgba(222,187,112,.72)!important;background:linear-gradient(180deg,rgba(53,43,27,.86),rgba(12,19,13,.96))!important;color:#f0dfb5!important;box-shadow:0 0 28px rgba(220,189,116,.17),0 13px 34px rgba(0,0,0,.58),inset 0 0 18px rgba(244,220,157,.06)!important}
html body section#briarGate .gate-crow{top:16vh!important;right:9vw!important;bottom:auto!important;width:min(120px,12vw)!important;opacity:.3!important;filter:brightness(.62) contrast(1.2) drop-shadow(0 12px 18px #000)!important;transform:rotate(11deg)!important}
html body section#briarGate .mist-one{left:27%!important;width:59%!important;bottom:-2%!important;height:19%!important;opacity:.34!important}
html body section#briarGate .mist-two{left:43%!important;width:43%!important;bottom:25%!important;opacity:.2!important}
@media(max-width:700px){html body section#briarGate .gate-art{background-position:37% 66%!important;filter:brightness(.5) saturate(1.05) contrast(1.1)!important}html body section#briarGate.briar-gate:before{left:-29%!important;width:62%!important}html body section#briarGate.briar-gate:after{right:-24%!important;width:55%!important}html body section#briarGate .gate-copy{margin:16vh 0 0 17vw!important;width:72vw!important;padding:18px!important}html body section#briarGate .gate-copy:before{width:74vw!important;height:390px!important}html body section#briarGate .gate-copy h1{font-size:clamp(3rem,13vw,4.8rem)!important}html body section#briarGate .gate-crow{top:11vh!important;right:4vw!important;width:76px!important}}
