/* =========================================================
   NOTTYBULL — Home page motion & carousels
   ========================================================= */

/* ---------- Bento: bigger "Oversized AF." photo ---------- */
.tile.a{min-height:460px}
.tile.a>div{position:relative;z-index:2;max-width:50%}
.tile.a img{right:22px;top:118px;bottom:auto;width:46%;height:calc(100% - 140px);object-fit:cover;object-position:50% 14%;border:var(--edge);border-radius:22px;transform:rotate(3deg);box-shadow:7px 7px 0 var(--ink);transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.tile.a:hover img{transform:rotate(0deg) scale(1.02)}
.tile.a .fit-sticker{position:absolute;z-index:3;right:34%;bottom:34px;font-family:var(--hand);font-size:19px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:3px 14px;transform:rotate(-6deg);box-shadow:3px 3px 0 var(--ink)}

/* ---------- Themed arrow buttons ---------- */
.nb-ctrl{display:flex;gap:10px}
.nb-ctrl button{width:56px;height:56px;border-radius:50%;border:var(--edge);background:var(--paper);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;transition:transform .12s,box-shadow .12s,background .15s}
.nb-ctrl button:hover{background:var(--lens);transform:translate(-2px,-2px) rotate(-6deg);box-shadow:5px 5px 0 var(--ink)}
.nb-ctrl button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.nb-ctrl svg{width:24px;height:24px;stroke:var(--ink)}

/* ---------- Vibe quiz: progress bar on the active option ---------- */
.opt{position:relative;overflow:hidden}
.opt .vbar{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--ink);transform-origin:left center;transform:scaleX(0);transition:transform .1s linear;pointer-events:none}
.opt:not([aria-pressed="true"]) .vbar{opacity:0}
.vibe.hold .opt[aria-pressed="true"] .vbar{background:var(--charcoal)}

/* ---------- Lookbook strip ---------- */
.strip{scroll-behavior:smooth}
.strip .polaroid{transition:transform .35s}
.strip .polaroid:hover{transform:rotate(0deg) translateY(-6px)}

/* ---------- Reviews carousel ---------- */
.reviews .head{position:relative}
.rv-ctrl{justify-content:center;margin-top:24px}
.rv.rv-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:26px 8px 56px;align-items:flex-start}
.rv-track::-webkit-scrollbar{display:none}
.rv-track>article{flex:0 0 calc((100% - 66px)/4);scroll-snap-align:start;min-width:0}

/* ---------- Tag us: 4 bigger photos at a time ---------- */
.ugc .head{align-items:flex-end}
.ugc-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ugc-grid.ugc-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:18px 8px 50px}
.ugc-track::-webkit-scrollbar{display:none}
.ugc-track>a{flex:0 0 calc((100% - 72px)/4);scroll-snap-align:start;border-radius:26px;box-shadow:6px 6px 0 var(--ink)}
.ugc-track span{left:14px;bottom:14px;font-size:15px;padding:3px 12px}
.ugc-track>a:hover{box-shadow:9px 9px 0 var(--ink)}

/* ---------- Warning tapes ---------- */
@media (prefers-reduced-motion:no-preference){
  .tapes .t{transition:translate 1.1s cubic-bezier(.2,1.25,.35,1)}
  .tapes .t2{transition-delay:.15s}
  .tapes.pre .t1{translate:-115% 0}
  .tapes.pre .t2{translate:115% 0}
  .tapes .t1{animation:tapeSwayA 5.5s ease-in-out infinite}
  .tapes .t2{animation:tapeSwayB 6.5s ease-in-out infinite}
  @keyframes tapeSwayA{0%,100%{rotate:0deg}50%{rotate:1.5deg}}
  @keyframes tapeSwayB{0%,100%{rotate:0deg}50%{rotate:-1.3deg}}
  .tapes .t1::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.65) 50%,transparent 58%);background-size:260% 100%;animation:tapeShine 3.8s linear infinite}
  @keyframes tapeShine{from{background-position:130% 0}to{background-position:-130% 0}}
  .tapes .track span::after{animation:tapeSpin 5s linear infinite}
  @keyframes tapeSpin{to{transform:rotate(360deg)}}
  .tapes:hover .track{animation-play-state:paused}
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .rv-track>article{flex-basis:calc((100% - 22px)/2)}
  .ugc-track>a{flex-basis:calc((100% - 48px)/3)}
}
@media (max-width:860px){
  .tile.a{min-height:0}
  .tile.a>div{max-width:none}
  .tile.a img{position:relative;right:auto;top:auto;width:100%;height:340px;margin-top:20px;transform:rotate(-1.5deg)}
  .tile.a .fit-sticker{right:28px;bottom:48px}
}
@media (max-width:700px){
  .ugc-track>a{flex-basis:calc((100% - 24px)/2)}
  .ugc .head{flex-direction:column;align-items:flex-start}
  .nb-ctrl button{width:48px;height:48px}
}
@media (max-width:520px){
  .rv-track>article{flex-basis:86%}
  .rv.rv-track{padding-bottom:30px}
}

/* Review cards: the design's 4 looks repeat for every card (classes, so loop copies keep their look) */
.rv-track article.rv-s1{transform:rotate(-3deg);background:var(--lens);color:var(--ink)}
.rv-track article.rv-s2{transform:rotate(2deg) translateY(30px);background:var(--paper);color:var(--ink)}
.rv-track article.rv-s3{transform:rotate(-1.5deg);background:var(--blush);color:var(--ink)}
.rv-track article.rv-s4{transform:rotate(3deg) translateY(20px);background:var(--ink);color:var(--paper)}
.rv-track article.rv-s1 .stars{color:var(--ink)}
.rv-track article:not(.rv-s1) .stars{color:var(--hot)}
@media (max-width:520px){.rv-track article[class*="rv-s"]{transform:none}}

/* ---------- Shoot film ---------- */
.shoot{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-bottom:var(--edge);padding:clamp(56px,7vw,100px) 0}
.shoot::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(251,181,47,.16) 1.5px,transparent 1.8px) 0 0/16px 16px;pointer-events:none}
.shoot .grain{opacity:.12}
.shoot .wrap{position:relative;z-index:2}
.shoot-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:34px}
.shoot-head .big{font-size:clamp(44px,7vw,110px);line-height:.9}
.shoot-head .hand{color:var(--lens);font-size:clamp(20px,2vw,28px);transform:rotate(-4deg)}
.shoot-frame{position:relative;margin:0 auto;max-width:1240px;aspect-ratio:16/9;background:var(--paper);padding:clamp(8px,1vw,14px);border:var(--edge);border-radius:30px;box-shadow:12px 12px 0 var(--lens);transform:rotate(-.6deg)}
.shoot-frame.is-vertical{aspect-ratio:9/16;width:min(100%,calc(78svh * 9 / 16));max-width:none;transform:rotate(-1deg)}
.shoot-video{display:block;width:100%;height:100%;object-fit:cover;border-radius:20px;background:#2a2b2e;pointer-events:none;user-select:none}
.shoot-frame:not(.ready) .shoot-video{background:linear-gradient(110deg,#2a2b2e 40%,#3a3b3f 50%,#2a2b2e 60%) 0 0/300% 100%;animation:shootLoad 1.6s linear infinite}
@keyframes shootLoad{to{background-position:-300% 0}}
.shoot-video::-webkit-media-controls,.shoot-video::-webkit-media-controls-enclosure{display:none!important}
.shoot-kicker{position:absolute;z-index:3;left:clamp(18px,2.4vw,34px);top:clamp(18px,2.4vw,34px);display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border:2px solid var(--paper);border-radius:999px;padding:6px 14px;font-weight:800;font-size:14px;transform:rotate(-3deg)}
.shoot-kicker i{width:10px;height:10px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.35);animation:rec 1.2s ease-in-out infinite}
@keyframes rec{50%{opacity:.25}}
.shoot-frame .tape-bit{top:-16px;z-index:4}
.shoot-frame .t-l{left:10%;transform:rotate(-8deg)}
.shoot-frame .t-r{right:10%;transform:rotate(7deg);background:rgba(205,180,242,.9)}
.shoot-shop{display:flex;align-items:center;gap:18px;flex-wrap:wrap;max-width:1240px;margin:44px auto 0}
.shoot-shop>b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--lens)}
.shoot-items{display:flex;gap:10px;flex-wrap:wrap;flex:1}
.shoot-items a{display:flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);border:2px solid var(--paper);border-radius:999px;padding:4px 14px 4px 4px;text-decoration:none;font-weight:800;font-size:14px;transition:transform .15s,background .15s}
.shoot-items a:hover{background:var(--lens);transform:translateY(-3px) rotate(-1.5deg)}
.shoot-items img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--ink)}
.shoot-items em{font-style:normal;font-family:var(--display);font-weight:400}
.shoot-empty{padding:30px 0;background:var(--smoke)}
@media (max-width:1023px){
  .shoot-head{justify-content:center;text-align:center}
  .shoot-shop{justify-content:center;text-align:center}
  .shoot-shop>b{flex-basis:100%}
  .shoot-items{flex:0 1 auto;justify-content:center}
}
@media (max-width:520px){
  .shoot-frame{border-radius:24px;box-shadow:8px 8px 0 var(--lens)}
  .shoot-frame.is-vertical{width:100%;max-height:none}
  .shoot-video{border-radius:16px}
  .shoot-items a span{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (min-width:1024px){.shoot-frame:not(.is-vertical){max-width:min(1240px,calc((100svh - 150px) * 16 / 9))}.shoot-head{max-width:min(1240px,calc((100svh - 150px) * 16 / 9));margin-inline:auto}.shoot-shop{max-width:min(1240px,calc((100svh - 150px) * 16 / 9))}}

/* ---------- Street shoot collage ---------- */
.street{position:relative;overflow:hidden;background:var(--royal);color:var(--paper);border-block:var(--edge);padding:clamp(72px,9vw,130px) 0}
.street::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.14) 1.5px,transparent 1.8px) 0 0/16px 16px;pointer-events:none}
.street .grain{opacity:.14}
.street .wrap{position:relative;z-index:2}
.street-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,400px);gap:22px 48px;align-items:end;justify-content:space-between;margin-bottom:clamp(44px,5vw,70px)}
.street-head .big{font-size:clamp(44px,6.2vw,96px);line-height:.9}
.street-head .big span{display:block;white-space:nowrap}
.street-head .big .outline{-webkit-text-stroke-color:var(--paper)}
.street-head .lede{margin:0 0 12px;font-weight:600}
.street-head .hand{display:inline-block;color:var(--lens);font-size:clamp(20px,2vw,27px);transform:rotate(-3deg)}
.street-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(18px,2.2vw,30px)}
.street-grid:not(.n4) .st{aspect-ratio:4/5}
.street-grid.n4{grid-template-columns:1fr 1.13fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:2.2/1}
.st{position:relative;margin:0;min-height:0;background:var(--paper);padding:clamp(7px,.8vw,11px);border:var(--edge);border-radius:24px;box-shadow:8px 8px 0 var(--ink);transition:transform .35s cubic-bezier(.2,1.3,.4,1),box-shadow .2s}
.st img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:16px}
.st:nth-child(4n+1){box-shadow:8px 8px 0 var(--lens);transform:rotate(-1.6deg)}
.st:nth-child(4n+2){box-shadow:8px 8px 0 var(--blush);transform:rotate(1.1deg)}
.st:nth-child(4n+3){box-shadow:8px 8px 0 var(--mint);transform:rotate(-.8deg)}
.st:nth-child(4n+4){box-shadow:8px 8px 0 var(--puff);transform:rotate(1.8deg)}
.street-grid.n4 .st:nth-child(1){grid-column:1;grid-row:1/3}
.street-grid.n4 .st:nth-child(2){grid-column:2;grid-row:1}
.street-grid.n4 .st:nth-child(3){grid-column:2;grid-row:2}
.street-grid.n4 .st:nth-child(4){grid-column:3;grid-row:1/3}
.st:hover{transform:rotate(0) translateY(-6px);z-index:3}
.st .tape-bit{top:-15px;left:50%;transform:translateX(-50%) rotate(-5deg)}
.st figcaption{position:absolute;z-index:2;top:clamp(18px,2vw,26px);left:clamp(18px,2vw,26px);max-width:calc(100% - 40px);background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:3px 13px;font-family:var(--hand);font-size:clamp(15px,1.3vw,19px);line-height:1.2;transform:rotate(-4deg);box-shadow:3px 3px 0 var(--ink)}
.st-tag{position:absolute;z-index:2;left:clamp(18px,2vw,26px);bottom:clamp(18px,2vw,26px);max-width:calc(100% - 40px);display:flex;align-items:center;gap:9px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:4px 14px 4px 4px;text-decoration:none;font-weight:800;font-size:14px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,background .15s}
.st-tag:hover{background:var(--lens);transform:translateY(-3px) rotate(-1.5deg)}
.st-tag img{width:36px;height:36px;flex:none;border-radius:50%;object-fit:cover;object-position:top;border:2px solid var(--ink)}
.st-tag span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-tag em{flex:none;font-style:normal;font-family:var(--display);font-weight:400}
.street-foot{text-align:center;margin-top:clamp(48px,5vw,70px)}
@media (max-width:1100px){
  .street-grid.n4{aspect-ratio:1.9/1}
}
@media (max-width:860px){
  .street-head{grid-template-columns:minmax(0,1fr)}
  .street-head .big span{white-space:normal}
  .street-grid.n4{aspect-ratio:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto;grid-template-areas:"b b" "a d" "c c"}
  .street-grid.n4 .st:nth-child(1){grid-area:a;aspect-ratio:2/3}
  .street-grid.n4 .st:nth-child(2){grid-area:b;aspect-ratio:3/2}
  .street-grid.n4 .st:nth-child(3){grid-area:c;aspect-ratio:3/2}
  .street-grid.n4 .st:nth-child(4){grid-area:d;aspect-ratio:2/3}
  .st{border-radius:20px}
  .st img{border-radius:13px}
  .st:nth-child(n){transform:rotate(-.8deg)}
  .st:nth-child(even){transform:rotate(.9deg)}
}
@media (max-width:520px){
  .street-grid,.street-grid.n4{gap:16px}
  .st{box-shadow:5px 5px 0 var(--ink)!important}
  .st figcaption{font-size:14px;padding:2px 10px;top:14px;left:14px}
  .st-tag{left:12px;bottom:12px;max-width:calc(100% - 24px);font-size:12.5px;padding:3px 10px 3px 3px}
  .st-tag img{width:28px;height:28px}
  .street-grid.n4 .st:nth-child(1) .st-tag span,.street-grid.n4 .st:nth-child(4) .st-tag span{display:none}
}