/* Cinematic layer for the current home page (loaded only by home/index.php).
   Adds: hero light + NFC rings, a drawn TapPark rear-view-mirror scene, a word-by-word statement,
   film grain and a slight lean on product and price cards. The site's own design is untouched. */

/* ---------- film grain over the page ---------- */
.cn-grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: cnGrain 1.2s steps(6) infinite; }
@keyframes cnGrain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* ---------- hero: orange light and NFC rings behind the 3D card ---------- */
.lx-stage { isolation: isolate; }
.cn-glow { position: absolute; z-index: -1; left: 50%; top: 46%; width: 760px; height: 760px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(249,115,22,.28), rgba(251,146,60,.12) 45%, transparent 72%); animation: cnBreathe 7s ease-in-out infinite; }
@keyframes cnBreathe { 50% { opacity: .65; scale: .93; } }
.cn-rings { position: absolute; z-index: -1; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cn-rings span { position: absolute; width: 300px; height: 300px; border-radius: 50%; border: 1.5px solid rgba(234,88,12,.35); opacity: 0; animation: cnRing 4.2s cubic-bezier(.16,1,.3,1) infinite; }
.cn-rings span:nth-child(2) { animation-delay: 1.4s; } .cn-rings span:nth-child(3) { animation-delay: 2.8s; }
@keyframes cnRing { 0% { scale: .6; opacity: 0; } 15% { opacity: .9; } 100% { scale: 2.1; opacity: 0; } }

/* ---------- TapPark mirror scene ---------- */
.cn-scene-wrap { position: relative; }
.cn-scene { position: relative; aspect-ratio: 16 / 9; border-radius: 34px; overflow: hidden; container-type: inline-size; isolation: isolate;
  background: #1a1420; box-shadow: 0 40px 100px -40px rgba(28,25,23,.55), 0 0 0 1px rgba(28,25,23,.08); }
.cn-layer { position: absolute; inset: -3%; transition: transform .8s cubic-bezier(.16,1,.3,1); will-change: transform; }
.cn-layer svg { width: 100%; height: 100%; display: block; }
.cn-bokeh circle { animation: cnDrift 9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.cn-bokeh circle:nth-child(2n) { animation-duration: 12s; animation-delay: -3s; }
.cn-bokeh circle:nth-child(3n) { animation-duration: 15s; animation-delay: -6s; }
@keyframes cnDrift { to { transform: translate(18px, -6px) scale(1.08); opacity: .55; } }
.cn-glass { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.10) 38%, rgba(255,255,255,.02) 44%, transparent 52%) -60% 0 / 200% 100% no-repeat;
  animation: cnSweep 9s ease-in-out infinite; }
@keyframes cnSweep { 0%, 15% { background-position: -60% 0; } 60%, 100% { background-position: 160% 0; } }

/* the mirror and its mount */
.cn-mirror { position: absolute; z-index: 4; left: 50%; top: 0; width: 34cqw; translate: -50% 0; }
.cn-stem { width: 2.6cqw; height: 5.5cqw; margin: 0 auto; border-radius: 0 0 .8cqw .8cqw; background: linear-gradient(90deg, #0e0c0b, #2a2522 50%, #0e0c0b); }
.cn-body { position: relative; height: 8.6cqw; margin-top: -.6cqw; border-radius: 3.4cqw; padding: .7cqw; background: linear-gradient(180deg, #2b2623, #0f0d0c); box-shadow: 0 1.4cqw 3cqw -1cqw rgba(0,0,0,.8); }
.cn-glass-m { height: 100%; border-radius: 2.8cqw; overflow: hidden; position: relative;
  background: linear-gradient(180deg, #5b4a52 0%, #8a5d4a 46%, #2a2025 47%, #3a2c30 100%); }
.cn-glass-m::before { content: ""; position: absolute; left: 8%; right: 8%; top: 52%; height: 22%; border-radius: 40% 40% 10% 10%; background: #1c1517; opacity: .8; }
.cn-glass-m::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.22) 32%, transparent 44%); }

/* the hanging tag: hangs from the mirror's stem and swings */
.cn-swing { position: absolute; z-index: 3; left: 50%; top: 12.6cqw; width: 14cqw; margin-left: -7cqw; transform-origin: 50% 0; animation: cnSwing 3.6s ease-in-out infinite; }
@keyframes cnSwing { 0%, 100% { transform: rotate(-4.5deg); } 50% { transform: rotate(4.5deg); } }
.cn-string { width: .28cqw; height: 6.5cqw; margin: 0 auto; background: linear-gradient(#c9a27e, #8a6447); }
.cn-tag { position: relative; margin-top: -.4cqw; padding: 1.2cqw 1.2cqw 1.4cqw; border-radius: 1.6cqw; background: #fffaf5; color: #1c1917; text-align: center;
  box-shadow: 0 2cqw 4cqw -1.5cqw rgba(0,0,0,.75), 0 0 0 .14cqw rgba(234,88,12,.55), 0 0 5cqw -1cqw rgba(249,115,22,.55); }
.cn-tag::before { content: ""; position: absolute; left: 50%; top: -.9cqw; width: 1.4cqw; height: 1.4cqw; translate: -50% 0; border-radius: 50%; border: .3cqw solid #c9a27e; background: #fffaf5; }
.cn-tag-top { display: flex; align-items: center; justify-content: center; gap: .5cqw; font-size: 1.15cqw; font-weight: 800; letter-spacing: .04em; color: #c2410c; text-transform: uppercase; }
.cn-tag-top i { font-size: 1.1cqw; }
.cn-qr { width: 9.2cqw; height: 9.2cqw; margin: .8cqw auto .7cqw; padding: .45cqw; border-radius: .8cqw; background: #fff; box-shadow: 0 0 0 .1cqw #f1e7dd; position: relative; overflow: hidden; }
.cn-qr img, .cn-qr canvas { width: 100% !important; height: 100% !important; display: block; }
.cn-qr::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; top: -20%; background: linear-gradient(transparent, rgba(249,115,22,.55), transparent); opacity: 0; }
.cn-scene.is-scanning .cn-qr::after { animation: cnScanLine 1.4s ease-in-out 2; }
@keyframes cnScanLine { 0% { top: -20%; opacity: 1; } 100% { top: 100%; opacity: 1; } }
.cn-tag-line { font-size: 1.05cqw; font-weight: 700; line-height: 1.25; }
.cn-tag-sub { margin-top: .2cqw; font-size: .85cqw; color: #78716c; }

/* the phone scanning the tag */
.cn-phone { position: absolute; z-index: 6; right: 7%; bottom: -6%; width: 17cqw; aspect-ratio: 9 / 18.5; border-radius: 2.6cqw; padding: .55cqw; background: #0b0a09;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(0,0,0,.9), 0 0 0 .1cqw rgba(255,255,255,.12) inset; rotate: -8deg; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.cn-screen { position: relative; height: 100%; border-radius: 2.1cqw; overflow: hidden; background: radial-gradient(120% 80% at 50% 30%, #3b2e33, #141012); }
.cn-frame { position: absolute; left: 22%; right: 22%; top: 20%; aspect-ratio: 1; }
.cn-frame span { position: absolute; width: 22%; height: 22%; border: .32cqw solid #fff; }
.cn-frame span:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: .6cqw 0 0 0; }
.cn-frame span:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 .6cqw 0 0; }
.cn-frame span:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 .6cqw; }
.cn-frame span:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 .6cqw 0; }
.cn-scene.is-scanning .cn-frame span { border-color: #fb923c; transition: border-color .3s; }
.cn-cam-label { position: absolute; left: 0; right: 0; bottom: 30%; text-align: center; color: rgba(255,255,255,.75); font-size: .9cqw; }
.cn-sheet { position: absolute; left: 6%; right: 6%; bottom: 4%; padding: 1cqw; border-radius: 1.4cqw; background: #fffaf5; color: #1c1917; font-size: .85cqw; line-height: 1.3;
  translate: 0 130%; transition: translate .6s cubic-bezier(.16,1,.3,1); }
.cn-sheet b { display: block; font-size: 1cqw; margin-bottom: .5cqw; }
.cn-sheet span { display: block; margin-top: .4cqw; padding: .55cqw .7cqw; border-radius: .8cqw; background: #fff1e6; color: #9a3412; font-weight: 700; }
.cn-scene.is-alerted .cn-sheet { translate: 0 0; }

/* the owner's notification */
.cn-notif { position: absolute; z-index: 7; left: 5%; top: 8%; display: flex; align-items: center; gap: 1cqw; padding: 1cqw 1.4cqw; border-radius: 1.6cqw;
  background: rgba(255,250,245,.94); backdrop-filter: blur(8px); color: #1c1917; font-size: 1.05cqw; line-height: 1.3; box-shadow: 0 1.4cqw 3cqw -1cqw rgba(0,0,0,.6);
  opacity: 0; translate: 0 -1.4cqw; transition: opacity .5s, translate .6s cubic-bezier(.16,1,.3,1); }
.cn-notif i { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: .8cqw; background: #ea580c; color: #fff; font-size: 1.2cqw; }
.cn-notif b { display: block; font-size: 1.1cqw; }
.cn-notif small { color: #78716c; }
.cn-scene.is-alerted .cn-notif { opacity: 1; translate: 0 0; }
.cn-caption-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }

/* ---------- statement: words light up while it scrolls through ---------- */
.cn-statement { padding: 110px 0; text-align: center; }
.cn-statement p { margin: 0 auto; max-width: 20ch; font-size: clamp(34px, 5.4vw, 74px); line-height: 1.04; letter-spacing: -.045em; font-weight: 800; }
.cn-statement .w { color: #EADFD3; transition: color .45s; }
.cn-statement .w.lit { color: var(--ink); }
.cn-statement .w.or.lit { color: var(--orange); text-shadow: 0 0 34px rgba(249,115,22,.35); }

/* ---------- product and price cards lean toward the pointer ---------- */
.cn-lean { transform: perspective(900px) rotateX(var(--cn-tx, 0deg)) rotateY(var(--cn-ty, 0deg)); transition: transform .5s cubic-bezier(.16,1,.3,1); }

/* ---------- phones ---------- */
@media (max-width: 700px) {
  .cn-scene { aspect-ratio: 4 / 5; border-radius: 24px; }
  .cn-mirror { width: 60cqw; } .cn-stem { width: 4.6cqw; height: 9cqw; } .cn-body { height: 15cqw; border-radius: 6cqw; padding: 1.2cqw; } .cn-glass-m { border-radius: 5cqw; }
  .cn-swing { top: 22cqw; width: 30cqw; margin-left: -15cqw; } .cn-string { width: .6cqw; height: 9cqw; }
  .cn-tag { padding: 2.4cqw 2.4cqw 2.8cqw; border-radius: 3.2cqw; } .cn-tag-top { font-size: 2.6cqw; } .cn-tag-top i { font-size: 2.4cqw; }
  .cn-qr { width: 21cqw; height: 21cqw; padding: 1cqw; border-radius: 1.8cqw; } .cn-tag-line { font-size: 2.4cqw; } .cn-tag-sub { font-size: 2cqw; }
  .cn-phone { width: 34cqw; right: 4%; bottom: -10%; border-radius: 5cqw; padding: 1.1cqw; } .cn-screen { border-radius: 4cqw; }
  .cn-frame span { border-width: .7cqw; } .cn-cam-label { font-size: 2cqw; } .cn-sheet { font-size: 1.9cqw; padding: 2cqw; border-radius: 2.8cqw; } .cn-sheet b { font-size: 2.2cqw; }
  .cn-notif { left: 4%; right: 4%; top: auto; bottom: 4%; width: auto; max-width: 56%; font-size: 2.4cqw; padding: 2.2cqw; border-radius: 3cqw; gap: 2cqw; }
  .cn-notif i { width: 6cqw; height: 6cqw; font-size: 2.8cqw; border-radius: 1.8cqw; } .cn-notif b { font-size: 2.6cqw; }
  .cn-glow { width: 460px; height: 460px; }
  .cn-rings span { width: 220px; height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-grain, .cn-glow, .cn-rings span, .cn-swing, .cn-bokeh circle, .cn-glass { animation: none !important; }
  .cn-rings { display: none; }
  .cn-lean { transform: none !important; }
}