/* ============================================================
   TRACTOR WALA — cinematic single-screen music experience
   Layout coordinates are derived from the 1672 x 941 reference
   frame, expressed in vw / vh so the composition holds.
   ============================================================ */

:root{
  --navy:#071522;
  --deep-blue:#102B45;
  --orange:#D85A24;
  --bright-orange:#F0782D;
  --dark-red:#8E2119;
  --accent-red:#E53226;
  --cream:#F4E7CA;
  --white:#FFFFFF;
  --black:#080808;

  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --deva: "Noto Sans Devanagari", "Nirmala UI", "Mangal", var(--ui);

  /* composition */
  --mark-w: 55.4vw;          /* wordmark spans this much of the frame */
  --player-w: clamp(560px, 52.7vw, 1000px);
  --player-h: clamp(104px, 12.4vh, 134px);
  --edge: max(22px, 2.3vw);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--ui);
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-font-smoothing:antialiased;
}

.stage{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:680px;
  overflow:hidden;
  isolation:isolate;
}

/* ————————————————— HERO ————————————————— */

.hero{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

.hero picture{
  display:block;
  width:100%;
  height:100%;
}

.hero__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform-origin:52% 62%;
  animation:drift 46s ease-in-out infinite alternate;
}

@keyframes drift{
  from{ transform:scale(1); }
  to{ transform:scale(1.025); }
}

@media (max-width:600px){

  .hero__img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }

}
/* very light readability shaping — the photograph stays the star */
.hero__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 46%, rgba(0,0,0,0) 42%, rgba(3,8,14,.42) 78%, rgba(3,8,14,.72) 100%),
    linear-gradient(to bottom, rgba(4,10,18,.42) 0%, rgba(4,10,18,0) 22%),
    linear-gradient(to top, rgba(4,10,18,.5) 0%, rgba(4,10,18,0) 26%);
}

.hero__grain{
  position:absolute; inset:-60%; pointer-events:none;
  opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(5) infinite;
}

@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)} 100%{transform:translate(0,0)}
}

/* ————————————————— TOP HUD ————————————————— */

.hud{
  position:absolute; z-index:3;
  top:0; left:0; right:0;
  height:10.6vh; min-height:56px;
  display:flex; align-items:center;
  padding:0 var(--edge);
  padding-top:env(safe-area-inset-top);
  pointer-events:none;
}

.clock{
  display:flex; align-items:center; gap:.55em;
  font-size:clamp(13px,.95vw,16px);
  font-weight:500; letter-spacing:.01em;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 10px rgba(0,0,0,.55);
}
.clock__dot{
  width:.5em; height:.5em; border-radius:50%;
  background:var(--accent-red);
  box-shadow:0 0 10px rgba(229,50,38,.6);
  animation:blink 2.6s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.35} }

.status{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:.6em;
  white-space:nowrap;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.status__rule{
  width:clamp(18px,2.2vw,40px); height:1px;
  background:linear-gradient(90deg,rgba(244,231,202,0),rgba(244,231,202,.55));
}
.status__rule + .status__dot{ margin-left:-.15em; }
.status .status__rule--r,
.status__rule:last-child{ background:linear-gradient(90deg,rgba(244,231,202,.55),rgba(244,231,202,0)); }
.status__dot{
  width:.52em; height:.52em; border-radius:50%;
  font-size:clamp(15px,1.05vw,18px);
  background:#39D353;
  box-shadow:0 0 12px rgba(57,211,83,.75);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.82);opacity:.6} }
.status__icon{ font-size:clamp(15px,1.15vw,20px); line-height:1; }
.status__text{
  font-family:var(--deva); font-weight:700;
  font-size:clamp(14px,1.1vw,19px);
  color:var(--white);
}

.viewers{
  display:flex; align-items:center; gap:.5em;
  margin-left:auto;
  font-size:clamp(12px,.92vw,15px);
  font-weight:500;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 10px rgba(0,0,0,.55);
  white-space:nowrap;
  pointer-events:none;
}
.viewers__dot{
  width:.5em; height:.5em; border-radius:50%;
  background:#39D353;
  box-shadow:0 0 10px rgba(57,211,83,.75);
  animation:pulse 2.4s ease-in-out infinite;
}
.viewers__icon{ font-size:1.05em; line-height:1; }
.viewers__num{ font-variant-numeric:tabular-nums; font-weight:700; }
.viewers__label{ color:rgba(255,255,255,.6); font-weight:400; }

/* ————————————————— BRAND ————————————————— */

.brand{
  position:absolute; z-index:2;
  top:9.4vh; left:50%;
  transform:translateX(-50%);
  width:var(--mark-w);
  text-align:center;
  pointer-events:none;
}

.brand__mark{
  margin:0;
  font-family:var(--deva);
  font-weight:900;
  font-size:11vw;               /* refined at runtime to fill --mark-w */
  line-height:1.02;
  color:var(--cream);
  transform:scaleY(1.34);       /* the reference wordmark is a tall display cut */
  transform-origin:top center;
  text-shadow:0 .035em .06em rgba(0,0,0,.55), 0 .12em .3em rgba(0,0,0,.35);
  white-space:nowrap;
}

.brand__inner{ position:relative; display:inline-block; }

/* distressed / weathered paint on the glyphs only */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand__inner::after{
    content:attr(data-text);
    position:absolute; inset:0;
    color:transparent;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42 0.06' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0 0.03 2.6 0 0 0 -1.35'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23c)'/%3E%3C/svg%3E");
    background-size:26% auto;
    -webkit-background-clip:text; background-clip:text;
    mix-blend-mode:multiply;
    opacity:.85;
    text-shadow:none;
    pointer-events:none;
  }
}

.brand__tagline{
  margin:.06em 0 0;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.4vw,26px);
}
.brand__taglineText{
  font-size:clamp(11px,1.12vw,21px);
  font-weight:600;
  letter-spacing:.62em;
  text-indent:.62em;            /* balances the trailing letter-space */
  text-transform:uppercase;
  color:var(--accent-red);
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.brand__rule{
  position:relative;
  width:clamp(26px,3.6vw,70px); height:1px;
  background:linear-gradient(90deg,rgba(229,50,38,0),rgba(229,50,38,.9));
}
.brand__rule::after{
  content:""; position:absolute; right:0; top:-2px;
  border-left:5px solid var(--accent-red);
  border-top:2.5px solid transparent;
  border-bottom:2.5px solid transparent;
}
.brand__rule--r{ transform:scaleX(-1); }


/* ————————————————— TRACTOR HORN ————————————————— */

.horn{
  position:absolute; z-index:4;
  left:var(--edge); top:55.5%;
  transform:translateY(-50%);
  display:flex; align-items:center;
  gap:clamp(10px,.9vw,16px);
  width:clamp(240px,17.6vw,320px);
  height:clamp(56px,7.5vh,74px);
  padding:0 clamp(16px,1.2vw,22px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(16,16,18,.82),rgba(8,8,8,.9));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--white);
  font-family:var(--ui); font-size:clamp(15px,1.15vw,20px); font-weight:600;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s ease, border-color .25s ease;
}
.horn__icon{
  width:clamp(24px,1.7vw,32px); height:auto; flex:none;
  fill:var(--accent-red); color:var(--bright-orange);
  filter:drop-shadow(0 0 8px rgba(229,50,38,.35));
  transform:rotate(-6deg);
}
.horn__label{ white-space:nowrap; }
.horn__wave{ display:flex; align-items:center; gap:2px; margin-left:auto; height:22px; }
.horn__wave i{
  width:2.5px; height:30%; border-radius:2px;
  background:var(--accent-red);
  animation:bar 1.1s ease-in-out infinite;
  animation-play-state:paused;
  opacity:.75;
}
.horn__wave i:nth-child(2){ animation-delay:.12s } .horn__wave i:nth-child(3){ animation-delay:.24s }
.horn__wave i:nth-child(4){ animation-delay:.36s } .horn__wave i:nth-child(5){ animation-delay:.18s }
.horn__wave i:nth-child(6){ animation-delay:.3s }  .horn__wave i:nth-child(7){ animation-delay:.06s }

.horn:hover,.horn:focus-visible{
  transform:translateY(-50%) scale(1.035);
  border-color:rgba(229,50,38,.45);
  box-shadow:0 16px 46px rgba(0,0,0,.55), 0 0 34px rgba(229,50,38,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.horn:hover .horn__wave i,
.horn:focus-visible .horn__wave i,
.horn.is-honking .horn__wave i{ animation-play-state:running; opacity:1; }
.horn.is-honking{
  transform:translateY(-50%) scale(.975);
  box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 60px rgba(229,50,38,.45);
}
.horn.is-honking .horn__icon{ animation:honk .5s ease; }
@keyframes honk{
  0%{transform:rotate(-6deg) scale(1)} 30%{transform:rotate(-14deg) scale(1.18)}
  100%{transform:rotate(-6deg) scale(1)}
}
@keyframes bar{
  0%,100%{ height:22% } 25%{ height:88% } 50%{ height:42% } 75%{ height:100% }
}

/* ————————————————— NOW PLAYING LINE ————————————————— */

.nowline{
  position:absolute; z-index:3;
  left:50%; top:79.9%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:clamp(6px,.6vw,12px);
  white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
.nowline__text{
  font-family:var(--deva); font-weight:600;
  font-size:clamp(13px,1.05vw,19px);
  color:var(--cream);
}
.nowline__caret{
  font-size:clamp(11px,.85vw,15px);
  color:rgba(244,231,202,.55);
}
.nowline__wave{ display:flex; align-items:center; gap:2.5px; height:clamp(14px,1.5vh,20px); }
.nowline__wave i{
  width:2.5px; height:18%; border-radius:2px;
  background:linear-gradient(180deg,var(--accent-red),var(--dark-red));
  animation:bar 1s ease-in-out infinite;
  animation-play-state:paused;
  opacity:.5;
}
.nowline__wave--l{ flex-direction:row-reverse; }
.nowline__wave i:nth-child(1){animation-delay:.00s} .nowline__wave i:nth-child(2){animation-delay:.09s}
.nowline__wave i:nth-child(3){animation-delay:.18s} .nowline__wave i:nth-child(4){animation-delay:.27s}
.nowline__wave i:nth-child(5){animation-delay:.36s} .nowline__wave i:nth-child(6){animation-delay:.45s}
.nowline__wave i:nth-child(7){animation-delay:.14s} .nowline__wave i:nth-child(8){animation-delay:.23s}
.nowline__wave i:nth-child(9){animation-delay:.32s} .nowline__wave i:nth-child(10){animation-delay:.41s}
.nowline__wave i:nth-child(11){animation-delay:.05s} .nowline__wave i:nth-child(12){animation-delay:.5s}

body.is-playing .nowline__wave i,
body.is-playing .horn__wave i{ animation-play-state:running; opacity:1; }

/* ————————————————— PLAYER ————————————————— */

.player{
  position:absolute; z-index:5;
  left:50%; bottom:4.9vh;
  transform:translateX(-50%);
  width:var(--player-w); max-width:96vw;
  min-height:var(--player-h);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(14px,1.4vw,24px);
  padding:0 clamp(18px,1.8vw,30px) 0 clamp(12px,1vw,16px);
  border:1px solid rgba(229,50,38,.38);
  border-radius:clamp(24px,3.4vh,40px);
  background:linear-gradient(180deg,rgba(20,10,10,.72),rgba(10,6,6,.86));
  -webkit-backdrop-filter:blur(20px) saturate(120%); backdrop-filter:blur(20px) saturate(120%);
  box-shadow:0 26px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}

.player__art{
  width:clamp(58px,4.4vw,76px); height:clamp(58px,4.4vw,76px);
  object-fit:cover; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 20px rgba(0,0,0,.5);
}

.player__info{ min-width:0; display:flex; flex-direction:column; justify-content:center; }
.player__title{
  margin:0; font-size:clamp(17px,1.35vw,25px); font-weight:600; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player__artist{
  margin:.15em 0 0; font-size:clamp(12px,.92vw,16px); font-weight:400;
  color:rgba(255,255,255,.62);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.player__seek{
  margin-top:.5em;
  width:min(100%,clamp(220px,17.6vw,320px));
  padding:7px 0; cursor:pointer;
  touch-action:none;
}
.player__track{
  position:relative; height:4px; border-radius:4px;
  background:rgba(255,255,255,.18);
}
.player__fill{
  position:relative; height:100%; width:0%;
  border-radius:4px;
  background:linear-gradient(90deg,var(--dark-red),var(--accent-red));
}
.player__knob{
  position:absolute; right:-5px; top:50%;
  width:10px; height:10px; margin-top:-5px;
  border-radius:50%; background:var(--accent-red);
  box-shadow:0 0 10px rgba(229,50,38,.7);
  transition:transform .18s ease;
}
.player__seek:hover .player__knob,
.player__seek:focus-visible .player__knob{ transform:scale(1.35); }

.player__time{
  margin:.35em 0 0;
  font-size:clamp(11px,.8vw,14px);
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.55);
}
.player__cur{ color:var(--accent-red); font-weight:500; }
.player__sep{ margin:0 .3em; }
.player__note{
  margin:.3em 0 0;
  font-size:clamp(11px,.78vw,13px);
  color:rgba(240,120,45,.9);
}

.player__controls{ display:flex; align-items:center; gap:clamp(10px,1.15vw,22px); }

.ctrl{
  position:relative;
  display:grid; place-items:center;
  width:clamp(34px,2.6vw,44px); height:clamp(34px,2.6vw,44px);
  padding:0; border:0; border-radius:50%;
  background:transparent; color:rgba(255,255,255,.9);
  cursor:pointer;
  transition:color .2s ease, transform .2s ease, opacity .2s ease;
}
.ctrl svg{ width:62%; height:62%; }
.ctrl:hover{ color:var(--white); transform:scale(1.1); }
.ctrl[aria-pressed="true"]{ color:var(--accent-red); }
.ctrl[aria-pressed="true"]::after{
  content:""; position:absolute; margin-top:2.1em;
  width:4px; height:4px; border-radius:50%; background:var(--accent-red);
}

.ctrl--play{
  width:clamp(48px,3.9vw,64px); height:clamp(48px,3.9vw,64px);
  background:var(--accent-red); color:var(--white);
  box-shadow:0 10px 26px rgba(229,50,38,.4);
}
.ctrl--play:hover{ background:#f0392c; transform:scale(1.06); }
.ctrl--play svg{ width:46%; height:46%; }
.ctrl--play .ic-pause{ display:none; }
body.is-playing .ctrl--play .ic-play{ display:none; }
body.is-playing .ctrl--play .ic-pause{ display:block; }

/* ————————————————— QUEUE ————————————————— */

.queue{
  position:absolute; z-index:6;
  right:max(24px,3vw);
  bottom:calc(4.9vh + var(--player-h) + 14px);
  width:min(320px,86vw);
  padding:16px 18px 14px;
  border:1px solid rgba(229,50,38,.34);
  border-radius:20px;
  background:rgba(12,7,7,.9);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:rise .3s ease both;
}
.queue[hidden]{ display:none; }
.queue__head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.queue__head h3{ margin:0; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.queue__repeat{
  margin-left:auto; padding:4px 10px;
  border:1px solid rgba(255,255,255,.18); border-radius:999px;
  background:transparent; color:rgba(255,255,255,.7);
  font:500 11px/1.4 var(--ui); letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
}
.queue__repeat[aria-pressed="true"]{ color:var(--accent-red); border-color:rgba(229,50,38,.6); }
.queue__close{
  width:26px; height:26px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.08); color:var(--white); font-size:17px; line-height:1; cursor:pointer;
}
.queue__list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; }
.queue__item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:12px;
  background:transparent; border:0; width:100%; text-align:left;
  color:rgba(255,255,255,.8); font:400 14px/1.3 var(--ui); cursor:pointer;
}
.queue__item:hover{ background:rgba(255,255,255,.07); }
.queue__item[aria-current="true"]{ color:var(--accent-red); }
.queue__item span{ display:block; font-size:12px; color:rgba(255,255,255,.45); }

/* ————————————————— ENTRANCE ————————————————— */

.reveal{ opacity:0; animation:rise .8s cubic-bezier(.2,.7,.3,1) both; }
.reveal--1{ animation-delay:.15s; }
.reveal--2{ animation-delay:.45s; }
.reveal--3{ animation-delay:.65s; }
.reveal--4{ animation-delay:.8s; }
.reveal--5{ animation-delay:.9s; }
.reveal--6{ animation-delay:1s; animation-duration:.9s; }

@keyframes rise{
  from{ opacity:0; transform:translateY(18px); filter:blur(6px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}
/* elements that carry their own transform need their own keyframes */
.brand__mark.reveal{ animation-name:riseMark; }
@keyframes riseMark{
  from{ opacity:0; transform:scaleY(1.34) translateY(14px); filter:blur(8px); }
  to{ opacity:1; transform:scaleY(1.34) translateY(0); filter:blur(0); }
}
.horn.reveal{ animation-name:riseHorn; }
@keyframes riseHorn{
  from{ opacity:0; transform:translateY(-50%) translateX(-26px); }
  to{ opacity:1; transform:translateY(-50%) translateX(0); }
}
.nowline.reveal{ animation-name:riseNow; }
@keyframes riseNow{
  from{ opacity:0; transform:translate(-50%,-50%) translateY(10px); }
  to{ opacity:1; transform:translate(-50%,-50%) translateY(0); }
}
.player.reveal{ animation-name:risePlayer; }
@keyframes risePlayer{
  from{ opacity:0; transform:translateX(-50%) translateY(60px); }
  to{ opacity:1; transform:translateX(-50%) translateY(0); }
}

:focus-visible{ outline:2px solid var(--bright-orange); outline-offset:3px; border-radius:6px; }

/* ————————————————— RESPONSIVE ————————————————— */

@media (max-width:1100px){
  :root{ --mark-w:66vw; --player-w:min(760px,94vw); }
}

@media (max-width:820px){
  :root{ --mark-w:78vw; }
  .brand{ top:11vh; }
  .horn{ top:52%; }
}

@media (max-width:700px){
  :root{
    --mark-w:84vw;
    --player-w:95vw;
    --player-h:clamp(88px,13vh,106px);
    --edge:16px;
  }
  .stage{ min-height:560px; }
  .hud{ height:8vh; }
  .clock{ font-size:13px; }
  .status{ font-size:14px; }
  .viewers{ font-size:11px; gap:.4em; }
  .viewers__label{ display:none; }
  .brand{ top:12.5vh; }
  .brand__mark{ transform:scaleY(1.28); }
  @keyframes riseMark{
    from{ opacity:0; transform:scaleY(1.28) translateY(14px); filter:blur(8px); }
    to{ opacity:1; transform:scaleY(1.28) translateY(0); filter:blur(0); }
  }
  .brand__taglineText{ font-size:11px; letter-spacing:.44em; text-indent:.44em; }
  .horn{
    top:auto; bottom:calc(var(--player-h) + 15vh);
    transform:none;
    width:auto; min-width:190px; height:52px;
    font-size:15px;
  }
  .horn:hover,.horn:focus-visible,.horn.is-honking{ transform:scale(1.02); }
  @keyframes riseHorn{
    from{ opacity:0; transform:translateX(-26px); }
    to{ opacity:1; transform:translateX(0); }
  }
  .nowline{ top:auto; bottom:calc(var(--player-h) + 6vh); transform:translateX(-50%); }
  @keyframes riseNow{
    from{ opacity:0; transform:translateX(-50%) translateY(10px); }
    to{ opacity:1; transform:translateX(-50%) translateY(0); }
  }
  .nowline__wave i:nth-child(n+8){ display:none; }

  .player{
    bottom:calc(12px + env(safe-area-inset-bottom));
    gap:12px;
    padding:0 14px 0 10px;
    border-radius:22px;
  }
  .player__art{ width:56px; height:56px; border-radius:12px; }
  .player__title{ font-size:16px; }
  .player__artist{ font-size:12px; }
  .player__seek{ width:100%; margin-top:.4em; padding:5px 0; }
  .player__time{ font-size:11px; }
  .player__controls{ gap:6px; }
  #shuffleBtn,#queueBtn{ display:none; }
  #prevBtn{ display:none; }
  .ctrl{ width:38px; height:38px; }
  .ctrl--play{ width:48px; height:48px; }
  .queue{ bottom:calc(var(--player-h) + 24px + env(safe-area-inset-bottom)); right:2.5vw; }
}

@media (max-height:700px) and (min-width:701px){
  .brand{ top:8vh; }
  :root{ --player-h:clamp(96px,14vh,120px); }
}

@media (prefers-reduced-motion:reduce){
  .hero__img,.hero__grain,.clock__dot,.status__dot{ animation:none !important; }
  .reveal{ animation-duration:.01ms !important; }
  .horn__wave i,.nowline__wave i{ animation:none !important; height:55%; }
}

/* =====================================================
   TRACTOR WALA — SINGLE TAGLINE
   ===================================================== */

.marquee {
  position: fixed !important;

  top: 30vh !important;
  left: 0 !important;

  width: 50vw !important;
  height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  overflow: visible !important;

  pointer-events: none !important;

  z-index: 9999 !important;

  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.marquee__track {
  position: relative !important;

  width: 100% !important;
  height: 40px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  white-space: nowrap !important;

  transform: none !important;
  animation: none !important;

  opacity: 0 !important;

  filter: blur(4px);

  transition:
    opacity 0.45s ease,
    filter 0.45s ease !important;
}

.marquee__track.is-visible {
  opacity: 1 !important;
  filter: blur(0) !important;
}

.marquee__item {
  display: block !important;

  margin: 0 !important;
  padding: 0 15px !important;

  font-family: var(--deva, "Noto Sans Devanagari", sans-serif) !important;

  font-size: clamp(13px, 1.1vw, 17px) !important;

  font-weight: 600 !important;

  line-height: 1.5 !important;

  letter-spacing: 0.02em !important;

  color: #f4e7ca !important;

  text-align: center !important;

  text-shadow:
    0 1px 3px rgba(0,0,0,.9),
    0 0 12px rgba(0,0,0,.7) !important;
}

.marquee__dot {
  display: none !important;
}

@media (max-width: 600px) {
  .marquee {
    left: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
  }

  .marquee__item {
    font-size: 12px !important;
  }
}
/* ============================================================
   RESPONSIVE HERO GIF
   ============================================================ */

.hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Tablet */
@media (max-width: 820px) {
  .hero__img {
    object-position: center center;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}