/* rich finish (30.10): Rohit wants colour and an Indian, festive feel, so this layer only ADDS to site.css:
   gold foil, ornamented frames, textured paper, a family photograph, light that moves. Loaded by <body class="rc">. */

/* gold foil: a slow shine across the big headings on the dark rooms */
@keyframes foil{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.rc .why h2,.rc .inside-sec h2,.rc .demo h2,.rc .moment blockquote,.rc .counts b{
  background:linear-gradient(100deg,#FFF1C9 0%,#E9B04A 18%,#FFE3A0 32%,#C98A2E 48%,#FFF1C9 62%,#E9B04A 80%,#FFE3A0 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 9s linear infinite}

/* a small ornament under every centred heading: diamond, fine gold line, lotus dot */
.rc .head-center h2::after{content:"";display:block;width:220px;height:22px;margin:22px auto 0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='22'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23E9B04A' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23C98A2E'/%3E%3Cstop offset='1' stop-color='%23E9B04A' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 11h86' stroke='url(%23g)' stroke-width='2'/%3E%3Cpath d='M134 11h86' stroke='url(%23g)' stroke-width='2'/%3E%3Cpath d='M110 1l10 10-10 10-10-10z' fill='%23E9B04A'/%3E%3Cpath d='M110 6l5 5-5 5-5-5z' fill='%23FFF1C9'/%3E%3Ccircle cx='92' cy='11' r='2.2' fill='%23F57F20'/%3E%3Ccircle cx='128' cy='11' r='2.2' fill='%23F57F20'/%3E%3C/svg%3E") center/contain no-repeat}

/* the toran gets a light that walks along it, like a diya passing by */
@keyframes sweep{0%{transform:translateX(-30%)}100%{transform:translateX(130%)}}
.rc .toran{position:relative;overflow:hidden}
.rc .toran::after{content:"";position:absolute;inset:0 auto 0 0;width:28%;background:linear-gradient(90deg,transparent,rgba(255,241,201,.55),transparent);mix-blend-mode:overlay;animation:sweep 6s ease-in-out infinite}

/* handmade paper on the cream rooms, with a faint mandala in the corner */
.rc .light,.rc .how,.rc .news-sec{position:relative;isolation:isolate;overflow:hidden}
.rc .light::before,.rc .how::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:520px;height:520px;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cg fill='none' stroke='%238E1B12' stroke-width='1.2'%3E%3Ccircle r='92'/%3E%3Ccircle r='70'/%3E%3Ccircle r='22'/%3E%3Cg id='p'%3E%3Cpath d='M0-22C12-40 12-58 0-70C-12-58-12-40 0-22z'/%3E%3Cpath d='M0-70C8-78 8-86 0-92C-8-86-8-78 0-70z'/%3E%3C/g%3E%3Cuse href='%23p' transform='rotate(30)'/%3E%3Cuse href='%23p' transform='rotate(60)'/%3E%3Cuse href='%23p' transform='rotate(90)'/%3E%3Cuse href='%23p' transform='rotate(120)'/%3E%3Cuse href='%23p' transform='rotate(150)'/%3E%3Cuse href='%23p' transform='rotate(180)'/%3E%3Cuse href='%23p' transform='rotate(210)'/%3E%3Cuse href='%23p' transform='rotate(240)'/%3E%3Cuse href='%23p' transform='rotate(270)'/%3E%3Cuse href='%23p' transform='rotate(300)'/%3E%3Cuse href='%23p' transform='rotate(330)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.rc .light::before{right:-150px;top:-120px}
.rc .how::before{left:-170px;bottom:-170px}
.rc .light::after,.rc .how::after,.rc .news-sec::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ornamented corners: a gold line just inside the edge, with a small motif at each corner */
.rc .game,.rc .inside .shot,.rc .demo .screen,.rc .news{position:relative}
.rc .game::after,.rc .inside .shot::after,.rc .demo .screen::after{content:"";position:absolute;inset:10px;z-index:3;pointer-events:none;border:1px solid rgba(233,176,74,.45);border-radius:18px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M2 22V2h20' fill='none' stroke='%23E9B04A' stroke-width='2'/%3E%3Cpath d='M9 2l4 4-4 4-4-4z' fill='%23E9B04A'/%3E%3Ccircle cx='2' cy='28' r='2' fill='%23F57F20'/%3E%3Ccircle cx='28' cy='2' r='2' fill='%23F57F20'/%3E%3C/svg%3E") left -1px top -1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M32 22V2H12' fill='none' stroke='%23E9B04A' stroke-width='2'/%3E%3Cpath d='M25 2l4 4-4 4-4-4z' fill='%23E9B04A'/%3E%3Ccircle cx='32' cy='28' r='2' fill='%23F57F20'/%3E%3Ccircle cx='6' cy='2' r='2' fill='%23F57F20'/%3E%3C/svg%3E") right -1px top -1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M2 12v20h20' fill='none' stroke='%23E9B04A' stroke-width='2'/%3E%3Cpath d='M9 32l4-4-4-4-4 4z' fill='%23E9B04A'/%3E%3Ccircle cx='2' cy='6' r='2' fill='%23F57F20'/%3E%3Ccircle cx='28' cy='32' r='2' fill='%23F57F20'/%3E%3C/svg%3E") left -1px bottom -1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M32 12v20H12' fill='none' stroke='%23E9B04A' stroke-width='2'/%3E%3Cpath d='M25 32l4-4-4-4-4 4z' fill='%23E9B04A'/%3E%3Ccircle cx='32' cy='6' r='2' fill='%23F57F20'/%3E%3Ccircle cx='6' cy='32' r='2' fill='%23F57F20'/%3E%3C/svg%3E") right -1px bottom -1px no-repeat}
.rc .inside .shot::after{inset:22px;border-radius:12px}
.rc .game::after{border-color:rgba(233,176,74,.35)}

/* the boxes on the game cards tilt toward the cursor and catch the light */
.rc .game .ph{perspective:900px}
.rc .game .ph img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rc .game .ph .sheen{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,30%),rgba(255,241,201,.45),transparent 45%);mix-blend-mode:overlay}
.rc .game:hover .ph .sheen{opacity:1}

/* one family of buttons: saffron with glow for the main action, a gold outline for the second */
.rc:not(.inner) .btn-ink{background:linear-gradient(180deg,#FFC74D,var(--marigold) 35%,var(--saffron));color:#341203;box-shadow:0 14px 34px -14px rgba(245,127,32,.85),inset 0 1px 0 rgba(255,255,255,.45)}
.rc:not(.inner) .btn-ink:hover{background:linear-gradient(180deg,#FFC74D,var(--marigold) 35%,var(--saffron));box-shadow:0 18px 40px -12px rgba(245,127,32,1),inset 0 1px 0 rgba(255,255,255,.45)}
.rc .btn-line{box-shadow:inset 0 0 0 1.5px #C98A2E;color:#7A3B12}
.rc .btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--saffron);color:var(--saffron)}
.rc .demo .cta .btn+.btn{background:none;color:var(--cream);box-shadow:inset 0 0 0 1.5px rgba(233,176,74,.7)}
.rc .demo .cta .btn+.btn:hover{box-shadow:inset 0 0 0 1.5px var(--marigold);color:var(--marigold)}
.rc .news form .btn-ink{padding:13px 22px}

/* the family at the table, with marigold petals drifting down */
.rc .moment{position:relative;min-height:clamp(560px,80vh,780px);display:grid;align-items:end;overflow:hidden;background:var(--night-3);color:var(--cream)}
.rc .moment>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 28%}
.rc .moment::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,13,6,.35) 0,rgba(28,13,6,0) 25%,rgba(28,13,6,.15) 55%,rgba(28,13,6,.92) 100%),linear-gradient(90deg,rgba(42,20,10,.9),rgba(42,20,10,.55) 26%,rgba(42,20,10,0) 46%)}
.rc .moment .wrap{position:relative;z-index:3;padding:0 0 64px}
.rc .moment .eyebrow{color:var(--marigold)}
.rc .moment blockquote{margin-top:16px;font:400 clamp(28px,2.9vw,44px)/1.12 'Yatra One',serif;max-width:14ch;filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}
.rc .moment p{margin-top:14px;max-width:38ch;font-size:16.5px;color:var(--mist)}
.rc .petals{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.rc .petals i{position:absolute;top:-30px;width:14px;height:20px;border-radius:70% 0 70% 0;opacity:.85;
  background:radial-gradient(circle at 30% 30%,#FFD15C,#F57F20 70%);animation:fall linear infinite}
.rc .petals i:nth-child(3n){background:radial-gradient(circle at 30% 30%,#FFE08A,#FFB627 70%);width:11px;height:16px}
.rc .petals i:nth-child(4n){background:radial-gradient(circle at 30% 30%,#FF8A5B,#C2361F 75%);width:10px;height:14px}
@keyframes fall{0%{transform:translate3d(0,-20px,0) rotate(0)}100%{transform:translate3d(var(--dx,60px),110vh,0) rotate(540deg)}}
.rc .moment:not(.on) .petals i{animation-play-state:paused}

/* inside the box: numbers count up when the section arrives */
.rc .counts b{min-width:2ch}

/* steps: the red medallions get a slowly turning gold ring */
@keyframes turn{to{transform:rotate(360deg)}}
.rc .step .n::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1.5px dashed rgba(201,138,46,.75);animation:turn 24s linear infinite}

/* pillars: the icon tiles get a gold ring and a little lift */
.rc .pillar .ic{box-shadow:0 12px 30px -12px rgba(245,127,32,.9),0 0 0 4px rgba(42,20,10,.9),0 0 0 5.5px rgba(233,176,74,.7)}
.rc .pillar{transition:transform .35s,box-shadow .35s}
.rc .pillar:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(233,176,74,.45),0 30px 50px -30px rgba(0,0,0,.8)}

@media (max-width:900px){
  .rc .moment{display:block;min-height:0}
  .rc .moment>picture img{position:relative;height:auto;aspect-ratio:4/3;object-position:50% 30%}
  .rc .moment::before{inset:0 0 auto;height:calc(100vw * .75);background:linear-gradient(180deg,rgba(28,13,6,0) 60%,var(--night-3))}
  .rc .moment .wrap{padding:26px 0 60px}
  .rc .light::before,.rc .how::before{width:340px;height:340px}
}
/* table gestures (31.10): swipe for the dice, drag or tap the box; the text links make way for a golden hand */
.rc .table-actions{display:none}
.rc #scene{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.rc #scene.on-box canvas{cursor:grab}
.rc #scene.on-box:active canvas{cursor:grabbing}
.rc .gest{position:absolute;z-index:4;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .6s}
.rc .gest__hand{position:absolute;left:-90px;top:-6px;width:58px;height:58px;opacity:0;filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(255,182,39,.55))}
.rc .gest__hand svg{width:100%;height:100%;fill:rgba(255,224,150,.28);stroke:#FFD98A;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rc .gest.play .gest__hand{animation:gestSwipe 1.9s cubic-bezier(.45,.05,.3,1) .1s forwards}
@keyframes gestSwipe{0%{opacity:0;transform:translate(0,8px) rotate(-8deg)}15%{opacity:1;transform:translate(0,0) rotate(-8deg)}70%{opacity:1;transform:translate(180px,-10px) rotate(10deg)}100%{opacity:0;transform:translate(200px,-12px) rotate(12deg)}}
.rc .gest__tip{position:absolute;left:50%;top:52px;transform:translateX(-50%) translateY(6px);display:grid;gap:3px;justify-items:center;white-space:nowrap;padding:10px 16px;border-radius:14px;
  background:rgba(28,13,6,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(233,176,74,.45),0 18px 34px -16px rgba(0,0,0,.8);opacity:0;transition:opacity .5s .3s,transform .5s .3s}
.rc .gest__tip b{font:400 17px 'Yatra One',serif;color:#FFD98A;letter-spacing:.01em}
.rc .gest__tip small{font:500 12px Figtree;color:var(--mist)}
.rc .gest.play .gest__tip{opacity:1;transform:translateX(-50%)}
.rc .gest.gone{opacity:0}
/* after the demo swipe the label stays, smaller, with a gentle pulse so the eye finds it */
@keyframes gestPulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(233,176,74,.45),0 0 0 0 rgba(255,182,39,.35)}50%{box-shadow:inset 0 0 0 1px rgba(233,176,74,.7),0 0 0 8px rgba(255,182,39,0)}}
.rc .gest.rest .gest__tip{transform:translateX(-50%) scale(.88);animation:gestPulse 2.6s ease-in-out infinite}
@media (max-width:900px) and (orientation:portrait){.rc .gest__tip{top:auto;bottom:44px}}

/* the two gesture hints, always on the table: golden glass chips that pulse until a gesture is tried */
.rc .gbar{position:absolute;z-index:4;right:max(24px,calc(50% - 590px));bottom:5vh;display:flex;gap:12px;pointer-events:none}
.rc .gbar span{display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;border-radius:999px;font:600 14px Figtree;color:#FFE6B0;white-space:nowrap;
  background:rgba(28,13,6,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(233,176,74,.6),0 14px 30px -14px rgba(0,0,0,.8);
  animation:gestPulse 2.6s ease-in-out infinite}
.rc .gbar span+span{animation-delay:1.3s}
.rc .gbar svg{width:20px;height:20px;fill:none;stroke:#FFB627;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rc .gbar.used span{animation:none;opacity:.72}
@media (max-width:900px) and (orientation:portrait){
  .rc .gbar{left:12px;right:12px;bottom:auto;top:76px;justify-content:center;flex-wrap:wrap;gap:8px}
  .rc .gbar span{padding:8px 13px 8px 10px;font-size:12px;gap:7px}
  .rc .gbar svg{width:16px;height:16px}
}

/* phone hero (31.10): the table fills the first screen and the words sit at the bottom over a dark fade,
   so the box and the dice are the first thing a visitor sees, not a wall of text */
@media (max-width:900px) and (orientation:portrait){
  .rc .hero{display:block;height:100svh;min-height:600px;max-height:940px}
  .rc #scene{position:absolute;inset:0;height:auto;min-height:0}
  .rc .hero::before{background:linear-gradient(180deg,rgba(42,20,10,.75) 0,rgba(42,20,10,0) 13%,rgba(42,20,10,0) 40%,rgba(28,13,6,.9) 60%,#1C0D06 78%)}
  .rc .hero-text{position:absolute;left:0;right:0;top:auto;bottom:0;padding:0 22px calc(22px + env(safe-area-inset-bottom))}
  .rc .hero .eyebrow{font-size:10.5px}
  .rc .hero h1{margin-top:12px;font-size:clamp(36px,10.5vw,46px)}
  .rc .hero .lede{margin-top:12px;font-size:15.5px;line-height:1.55}
  .rc .hero .cta{margin-top:18px;gap:10px}
  .rc .hero .cta .btn{padding:13px 20px;font-size:15px}
  .rc .hero .facts-row{margin-top:16px;gap:16px;font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .rc .why h2,.rc .inside-sec h2,.rc .demo h2,.rc .moment blockquote,.rc .counts b,.rc .toran::after,.rc .step .n::after,.rc .petals i{animation:none}
  .rc .petals{display:none}
}

/* still fallback: when the 3D table can't run smoothly (no WebGL, busy or weak graphics card), the hero shows a photo of the same table */
html.no3d #scene{background:#2a140a url(../img/hero_poster.jpg?v=1) center/cover no-repeat}
html.no3d #scene canvas{display:none}
html.no3d .gbar,html.no3d .gest,html.no3d .hint,html.no3d .table-actions{display:none !important}
@media (max-width:900px){html.no3d #scene{background-image:url(../img/hero_poster_m.jpg?v=1);background-position:center top}}