/* ============================================================
   tajwalia.com — interactive layer (October 2026)
   Built from the Taj Walia Design System. Patterns studied in
   UI UX Pro Max, Magic UI and motion-primitives (MIT), Aceternity
   and Animate UI (concepts only). All code original.
   Progressive enhancement: without interactive.js nothing here
   hides content. Hidden "before" states only apply under
   html.tw-fx, which the script sets when motion is allowed.
   ============================================================ */

@property --tw-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
  --tw-ease: cubic-bezier(.2,.7,.2,1);
  --tw-expo: cubic-bezier(.16,1,.3,1);
  --tw-spring: cubic-bezier(.34,1.56,.64,1);
  --tw-glow: rgba(231,196,106,.14);
  --tw-lift: 0 26px 50px -26px rgba(0,0,0,.75);
}
:root[data-theme="light"] {
  --tw-glow: rgba(122,90,9,.10);
  --tw-lift: 0 26px 46px -28px rgba(23,23,27,.32);
}

/* ---------- Film grain: a quiet cinematic texture over the whole page ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; 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%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::after { opacity: .035; mix-blend-mode: multiply; filter: invert(1); }

/* ---------- Eyebrow dash ---------- */
.sec-h .k, .contact > .k, .book > .k { display: inline-flex; align-items: center; gap: 10px; }
.sec-h .k::before, .contact > .k::before, .book > .k::before { content: ""; width: 22px; height: 1px; background: currentColor; transform-origin: left center; flex: none; }
.contact > .k { justify-content: center; }
html.tw-fx .tw-rv .k::before, html.tw-fx .k.tw-rv::before { transform: scaleX(0); }
html.tw-fx .tw-rv.in .k::before, html.tw-fx .k.tw-rv.in::before { transform: scaleX(1); transition: transform .7s var(--tw-expo) .15s; }

/* ---------- Scroll reveals ---------- */
html.tw-fx .tw-rv { opacity: 0; transform: translateY(22px); }
html.tw-fx .tw-rv.in { opacity: 1; transform: none; transition: opacity .9s var(--tw-expo), transform .9s var(--tw-expo); transition-delay: calc(var(--tw-i, 0) * 80ms); }
html.tw-fx .tw-wipe { clip-path: inset(0 0 100% 0); transform: translateY(26px); }
html.tw-fx .tw-wipe.in { clip-path: inset(-10% -4% -12% -4%); transform: none; transition: clip-path 1s var(--tw-expo), transform 1s var(--tw-expo); transition-delay: calc(var(--tw-i, 0) * 80ms); }
html.tw-fx .tw-rule { transform: scaleX(0); transform-origin: left; }
html.tw-fx .tw-rule.in { transform: scaleX(1); transition: transform 1.1s var(--tw-expo); }

/* Banner: the gold line catches the light once */
.film h1 .y.tw-sheen { background-image: linear-gradient(100deg, currentColor 0 40%, #fff7dc 50%, currentColor 60% 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; }
html.tw-fx .film h1 .y.tw-sheen { animation: tw-sheen 1.6s var(--tw-ease) 1.1s 1 backwards; }
@keyframes tw-sheen { from { background-position: 150% 0; -webkit-text-fill-color: transparent; } to { background-position: -100% 0; -webkit-text-fill-color: transparent; } }

/* ---------- Nav: reading progress, scrollspy, gliding hover ---------- */
.tw-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transform-origin: left; transform: scaleX(var(--tw-p, 0)); pointer-events: none; }
#menu a.tw-here { color: var(--ink); }
@media (min-width: 1151px) {
  #menu { position: relative; isolation: isolate; }
  #menu .tw-glide { position: absolute; z-index: -1; top: 50%; left: 0; height: 34px; margin-top: -17px; width: 0; border-radius: 999px; background: var(--bg-3); opacity: 0; pointer-events: none; transition: transform .36s var(--tw-expo), width .36s var(--tw-expo), opacity .18s; }
  #menu .tw-under { position: absolute; left: 0; bottom: -9px; height: 2px; width: 0; border-radius: 2px; background: var(--gold); opacity: 0; pointer-events: none; transition: transform .46s var(--tw-expo), width .46s var(--tw-expo), opacity .2s; }
  #menu a { position: relative; }
}

/* ---------- Primary button: the gold full stop grows to fill the pill ---------- */
html.tw-js .btn.g { position: relative; isolation: isolate; overflow: hidden; padding: 12px 22px 12px 38px; -webkit-mask-image: -webkit-radial-gradient(white, black); transition: color .3s var(--tw-ease) .08s, transform .45s var(--tw-ease), box-shadow .45s var(--tw-ease); }
/* the full stop */
html.tw-js .btn.g::before { content: ""; position: absolute; left: 19px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--on-gold); z-index: -1; transform: scale(1); transition: transform .65s cubic-bezier(.65,0,.35,1), left .65s cubic-bezier(.65,0,.35,1); will-change: transform; }
html.tw-js .btn.g:hover, html.tw-js .btn.g:focus-visible { background: var(--gold-bg); border-color: var(--gold-bg); color: var(--gold-bg); transform: translateY(-2px); box-shadow: 0 16px 36px -16px rgba(231,196,106,.6); }
html.tw-js .btn.g:hover::before, html.tw-js .btn.g:focus-visible::before { transform: scale(60); }
html.tw-js .btn.g .tw-lbl { display: inline-block; transition: transform .65s cubic-bezier(.65,0,.35,1); }
html.tw-js .btn.g:hover .tw-lbl, html.tw-js .btn.g:focus-visible .tw-lbl { transform: translateX(-8px); }
html.tw-js .btn.g:active { transform: translateY(0) scale(.985); }
:root[data-theme="light"] .btn.g:hover, :root[data-theme="light"] .btn.g:focus-visible { color: var(--gold-bg); box-shadow: 0 16px 32px -16px rgba(122,90,9,.5); }
.btn:active { transform: translateY(1px) scale(.985); }
/* a slow light sweep across the hero button, paused while it is hovered */
html.tw-fx .btn.g.tw-shine::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.38) 50%, transparent 62%); transform: translateX(-120%); animation: tw-shine 6s cubic-bezier(.65,0,.35,1) 2.4s infinite; }
html.tw-fx .btn.g.tw-shine:hover::after, html.tw-fx .btn.g.tw-shine:focus-visible::after { animation: none; opacity: 0; }
@keyframes tw-shine { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }

/* ---------- Work reel ---------- */
.filters.tw-seg { position: relative; isolation: isolate; }
.filters .tw-ind { position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; background: var(--gold-bg); pointer-events: none; transition: transform .5s var(--tw-expo), width .5s var(--tw-expo), height .5s var(--tw-expo); }
.filters.tw-seg button { position: relative; transition: color .2s, border-color .2s, background .2s; }
.filters.tw-seg button[aria-pressed="true"] { background: transparent; border-color: transparent; color: var(--on-gold); }
.filters.tw-seg button:hover:not([aria-pressed="true"]) { border-color: var(--ink-2); color: var(--ink); }
#workCount { font-family: var(--mono); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

#track { padding-top: 18px; margin-top: -14px; padding-bottom: 34px; margin-bottom: -16px; }
#track.tw-drag { cursor: grab; }
#track.tw-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
#track.tw-dragging .card { pointer-events: none; }

#track .card { --mx: 50%; --my: 30%; isolation: isolate; transition: transform .45s var(--tw-ease), box-shadow .45s var(--tw-ease); }
#track .card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(242,214,138,.22), transparent 65%); mix-blend-mode: soft-light; opacity: 0; transition: opacity .35s var(--tw-ease); }
#track .card .tw-beam-ring { position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--tw-ang), transparent 0 66%, #E7C46A 84%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .35s var(--tw-ease); }
@media (hover: hover) {
  #track .card:hover { transform: translateY(-6px); box-shadow: var(--tw-lift); }
  #track .card:hover::before { opacity: 1; }
  #track .card:hover .tw-beam-ring { opacity: 1; }
  html.tw-fx #track .card:hover .tw-beam-ring { animation: tw-beam 3.4s linear infinite; }
  #track .card .go { transition: letter-spacing .35s var(--tw-ease), color .2s; }
  #track .card:hover .go { letter-spacing: .14em; }
}
#track .card:focus-visible .tw-beam-ring { opacity: 1; }
@keyframes tw-beam { to { --tw-ang: 360deg; } }

.tw-reelprog { flex: 1 1 120px; max-width: 360px; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; align-self: center; margin: 0 clamp(12px, 3vw, 32px); }
.tw-reelprog span { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--tw-rp, .2)); transition: transform .2s linear; }

/* ---------- Stats ---------- */
.num > div { position: relative; }
.num > div::before { content: ""; position: absolute; left: 0; top: -14px; width: 36px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--tw-ease); }
.num > div:hover::before, .num > div.tw-done::before { transform: scaleX(1); }
html.tw-fx .num .n sup { display: inline-block; opacity: 0; transform: scale(.4); }
html.tw-fx .num > div.tw-done .n sup { opacity: 1; transform: none; transition: opacity .3s var(--tw-ease), transform .65s var(--tw-spring); }

/* ---------- Experience: tracing beam ---------- */
.xp { position: relative; }
.tw-rail, .tw-beam { position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) * -.5 - 1px); width: 2px; pointer-events: none; }
.tw-rail { background: var(--line); }
.tw-beam { background: linear-gradient(var(--gold), var(--gold-deep)); transform-origin: top; transform: scaleY(var(--tw-b, 0)); }
.tw-beam::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px var(--tw-glow), 0 0 18px 2px rgba(231,196,106,.45); }
.tw-dot { position: absolute; left: calc(var(--gutter) * -.5 - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); pointer-events: none; transition: background .35s var(--tw-ease), border-color .35s var(--tw-ease), transform .45s var(--tw-spring); }
.tw-dot.on { background: var(--gold); border-color: var(--gold); transform: scale(1.12); }
.job.tw-on .n { color: var(--gold); }
.job .n { transition: color .35s var(--tw-ease); }
@media (max-width: 700px) { .tw-rail, .tw-beam, .tw-dot { left: auto; } .tw-rail, .tw-beam { left: -9px; } .tw-dot { left: -13px; } }

/* ---------- Books: 3D tilt toward the pointer, with glare ---------- */
.bk .tw-glare { position: absolute; inset: 0; border-radius: 1px 4px 4px 1px; pointer-events: none; transform: translateZ(1.5px); background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.26), rgba(255,255,255,0) 60%); opacity: 0; transition: opacity .35s var(--tw-ease); }
.vol.tw-tilt .bk { transform: rotateY(var(--ry, -12deg)) rotateX(var(--rx, 1deg)) translateY(-8px); transition: transform .12s linear; }
.vol.tw-tilt .bk .tw-glare { opacity: 1; }
.vol.tw-tilt .book3d .shadow { transform: scaleX(.92) translateY(6px); opacity: .7; }
.book3d .shadow { transition: transform .5s var(--tw-ease), opacity .5s; }

/* ---------- Cards with a pointer spotlight ---------- */
.ins a, .cred { --mx: 50%; --my: 0%; }
.ins a::after, .cred::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(300px circle at var(--mx) var(--my), var(--tw-glow), transparent 70%); opacity: 0; transition: opacity .3s var(--tw-ease); }
.ins a:hover::after, .cred:hover::after { opacity: 1; }
.ins a .go { transition: transform .35s var(--tw-ease), color .2s; display: inline-block; }
.ins a:hover .go { transform: translateX(5px); color: var(--gold); }
.cred:hover { box-shadow: var(--tw-lift); }

/* Method rows: the arrow turns to point onward */
.method .ar { transition: background .25s, border-color .25s, color .25s, transform .45s var(--tw-expo); }
.method a:hover .ar, .method a:focus-visible .ar { transform: rotate(-45deg); }

/* Beyond tiles */
.beyond > div { transition: background .25s, transform .4s var(--tw-ease); }
@media (hover: hover) { .beyond > div:hover { background: var(--bg-2); transform: translateY(-3px); } }

/* Touch screens: no sticky hover movement */
@media (hover: none) {
  #track .card:hover, .cred:hover { transform: none; box-shadow: none; }
}

/* Theme switch: let the circular reveal draw cleanly */
html.tw-vt-theme::view-transition-old(root), html.tw-vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Reduced motion and the site's own Pause motion: final states, no movement */
@media (prefers-reduced-motion: reduce) {
  .tw-rv, .tw-wipe, .tw-rule { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  #track .card .tw-beam-ring { animation: none !important; }
}
:root[data-motion="paused"] .tw-rv, :root[data-motion="paused"] .tw-wipe, :root[data-motion="paused"] .tw-rule { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* =====================================================================
   SHOWPIECE LAYER (October 2026, round 2)
   ===================================================================== */

/* ---------- 1. Opening intro (once per visit) ---------- */
html.tw-intro body::before { content: ""; position: fixed; inset: 0; z-index: 10000; background: #0E0E0E; animation: tw-intro-safety 0s linear 3s forwards; }
@keyframes tw-intro-safety { to { visibility: hidden; opacity: 0; } }
.tw-introbox { position: fixed; inset: 0; z-index: 10001; background: #0E0E0E; display: grid; place-items: center; cursor: pointer; clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.76,0,.24,1); }
.tw-introbox.out { clip-path: inset(0 0 100% 0); }
.tw-introbox .wm { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 80; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(2.6rem, 9vw, 7.5rem); line-height: 1; color: #F3F1EC; display: flex; align-items: baseline; overflow: hidden; padding: .08em .02em; }
.tw-introbox .wm i { font-style: normal; display: inline-block; transform: translateY(110%); animation: tw-letter .8s cubic-bezier(.16,1,.3,1) forwards; }
.tw-introbox .wm .sp { width: .28em; }
.tw-introbox .wm .stop { color: #E7C46A; transform: translateY(-160%) scale(.4); opacity: 0; animation: tw-stop .7s cubic-bezier(.34,1.56,.64,1) forwards; }
.tw-introbox .bar { position: absolute; left: 50%; bottom: 18vh; width: 120px; height: 1px; margin-left: -60px; background: rgba(243,241,236,.15); overflow: hidden; }
.tw-introbox .bar::after { content: ""; position: absolute; inset: 0; background: #E7C46A; transform-origin: left; transform: scaleX(0); animation: tw-bar 1.25s cubic-bezier(.65,0,.35,1) .1s forwards; }
.tw-introbox .skip { position: absolute; right: var(--gutter); bottom: 28px; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #8E8A82; background: none; border: 0; cursor: pointer; min-height: 44px; }
.tw-introbox .skip:hover { color: #E7C46A; }
@keyframes tw-letter { to { transform: none; } }
@keyframes tw-stop { to { transform: none; opacity: 1; } }
@keyframes tw-bar { to { transform: scaleX(1); } }

/* ---------- 2. Moving banner ---------- */
html.tw-pre .film h1 { visibility: hidden; animation: tw-h1-safety 0s linear 3.5s forwards; }
@keyframes tw-h1-safety { to { visibility: visible; } }
.film h1 .tw-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.film h1 .tw-wi { display: inline-block; }
html.tw-fx .film h1.tw-split .tw-wi { transform: translateY(105%); }
html.tw-fx .film h1.tw-split.tw-go .tw-wi { transform: none; transition: transform 1s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--wi) * 65ms); }
.film h1 .y .tw-wi.tw-sheen2 { background-image: linear-gradient(100deg, currentColor 0 40%, #fff7dc 50%, currentColor 60% 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; }
html.tw-fx .film h1.tw-go .y .tw-wi.tw-sheen2 { animation: tw-sheen 1.5s var(--tw-ease) 1.5s 1 backwards; }
html.tw-fx .film .side.tw-in-pre, html.tw-fx .film .stamp.tw-in-pre { opacity: 0; transform: translateY(16px); }
html.tw-fx .film .side.tw-in, html.tw-fx .film .stamp.tw-in { opacity: 1; transform: none; transition: opacity .9s var(--tw-expo), transform .9s var(--tw-expo); }
.film .t, .film .stamp { will-change: transform; }

/* ---------- 3. Case studies: sideways scroll (desktop) ---------- */
#work.tw-hs { overflow: visible; }
#work.tw-hs .tw-pin { position: sticky; }
#work.tw-hs #track { scroll-snap-type: none; overflow-x: hidden; scrollbar-width: none; }
#work.tw-hs #track::-webkit-scrollbar { display: none; }
#work.tw-hs .work-hint, #work.tw-hs .nav-b { display: none; }
#work.tw-hs .tw-reelprog { max-width: none; margin-left: 0; }
#work .tw-hs-count { font-family: var(--mono); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; display: none; }
#work.tw-hs .tw-hs-count { display: block; }
#work .tw-hs-count b { color: var(--gold); font-weight: 500; }

/* ---------- 5. Soft gold glows ---------- */
.tw-aura-host { position: relative; isolation: isolate; }
.tw-aura { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.tw-aura i { position: absolute; width: 56vw; max-width: 820px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(231,196,106,.13), rgba(231,196,106,.04) 40%, transparent 68%); filter: blur(10px); }
.tw-aura i:nth-child(1) { left: -18vw; top: -10%; }
.tw-aura i:nth-child(2) { right: -20vw; bottom: -30%; width: 46vw; background: radial-gradient(circle, rgba(201,166,74,.10), transparent 65%); }
html.tw-fx .tw-aura i:nth-child(1) { animation: tw-drift1 22s ease-in-out infinite alternate; }
html.tw-fx .tw-aura i:nth-child(2) { animation: tw-drift2 26s ease-in-out infinite alternate; }
@keyframes tw-drift1 { to { transform: translate(12vw, 8vh) scale(1.15); } }
@keyframes tw-drift2 { to { transform: translate(-10vw, -10vh) scale(.9); } }
:root[data-theme="light"] .tw-aura i:nth-child(1) { background: radial-gradient(circle, rgba(231,196,106,.22), rgba(231,196,106,.06) 40%, transparent 68%); }
:root[data-theme="light"] .tw-aura i:nth-child(2) { background: radial-gradient(circle, rgba(231,196,106,.16), transparent 65%); }

/* ---------- 6. Brand wall in motion ---------- */
.wall { --mx: -999px; --my: -999px; }
.wall.tw-lit { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(231,196,106,.85), rgba(231,196,106,.18) 45%, transparent 70%), var(--line); }
:root[data-theme="light"] .wall.tw-lit { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(122,90,9,.7), rgba(122,90,9,.15) 45%, transparent 70%), var(--line); }
html.tw-fx .wall.tw-ripple .cell { opacity: 0; transform: scale(.92); }
html.tw-fx .wall.tw-ripple.in .cell { opacity: 1; transform: none; transition: opacity .7s var(--tw-expo), transform .8s var(--tw-expo), background .25s; transition-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms), 0s; }

/* ---------- 7. Portrait ---------- */
.about .port { --py: 0px; }
.about .port img { transform: translateY(var(--py)) scale(1.1); }
.about .port:hover img { transform: translateY(var(--py)) scale(1.13); }
html.tw-fx .about .port.tw-wipe2 { clip-path: inset(100% 0 0 0); }
html.tw-fx .about .port.tw-wipe2.in { clip-path: inset(0 0 0 0); transition: clip-path 1.3s cubic-bezier(.76,0,.24,1); }
.about .g { position: relative; }
.tw-frame { position: absolute; left: 14px; top: 14px; width: var(--fw, 0px); height: var(--fh, 0px); border: 1px solid var(--gold); opacity: .55; pointer-events: none; z-index: -1; transition: transform .7s var(--tw-ease), opacity .4s; }
.about .g:has(.port:hover) .tw-frame { transform: translate(8px, 8px); opacity: .9; }
html.tw-fx .tw-frame { opacity: 0; transform: translate(-14px, -14px); }
html.tw-fx .tw-frame.in { opacity: .55; transform: none; transition: opacity .8s var(--tw-ease) .9s, transform 1s var(--tw-expo) .9s; }

/* ---------- 8. Full-stop cursor ---------- */
.tw-cur { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #E7C46A; border: 1px solid transparent; box-shadow: 0 0 0 1px rgba(14,14,14,.35); opacity: 0; transition: width .35s var(--tw-expo), height .35s var(--tw-expo), margin .35s var(--tw-expo), background .3s, border-color .3s, opacity .25s; }
.tw-cur.on { opacity: 1; }
.tw-cur.big { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(231,196,106,.10); border-color: #E7C46A; box-shadow: none; }
.tw-cur.dark { background: #0E0E0E; box-shadow: 0 0 0 1px rgba(231,196,106,.4); }
.tw-cur.dark.big { background: rgba(14,14,14,.08); border-color: #0E0E0E; }
.tw-cur.down { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.tw-cur.big.down { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
@media (hover: none), (pointer: coarse) { .tw-cur { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .tw-introbox { display: none; }
  .film h1 .tw-wi, .about .port, .wall .cell, .tw-frame { transform: none !important; clip-path: none !important; opacity: 1 !important; }
  .tw-aura i { animation: none !important; }
}