/* ============================================================================
   RED BARON — MOTION LAYER
   ----------------------------------------------------------------------------
   ΠΡΟΣΘΕΤΙΚΟ ΑΡΧΕΙΟ. Δεν αφαιρεί τίποτα από τα υπάρχοντα styles.
   Φορτώνεται ΤΕΛΕΥΤΑΙΟ, οπότε ενισχύει ό,τι υπάρχει ήδη.

   Για να το απενεργοποιήσεις εντελώς: σβήσε τη γραμμή
       <link rel="stylesheet" href="assets/motion.css">
   από τη σελίδα. Όλα επιστρέφουν ακριβώς όπως ήταν.

   Περιεχόμενα
     00 · Tokens
     01 · Card hover + image zoom
     02 · Spotlight glow
     03 · Stagger reveal
     04 · Skeleton shimmer + crossfade
     05 · Buttons & micro-states
     06 · Icons (glyph → SVG, χωρίς αλλαγή markup)
     07 · View Transitions
     08 · Gallery crossfade
     09 · Reduced motion & touch
   ========================================================================== */


/* ============================================================
   00 · TOKENS
   Νέα ονόματα (--m-*) ώστε να ΜΗΝ συγκρούονται με τα υπάρχοντα
   --ease / --dur που ήδη χρησιμοποιεί το site.
   ============================================================ */
:root{
  /* easing — ποτέ ease-in σε UI */
  --m-ease-out:    cubic-bezier(.23, 1, .32, 1);    /* είσοδος / έξοδος */
  --m-ease-in-out: cubic-bezier(.77, 0, .175, 1);   /* κίνηση on-screen */
  --m-ease-drawer: cubic-bezier(.32, .72, 0, 1);    /* drawers / modals */
  --m-ease-hover:  ease;                            /* hover + χρώματα */

  /* durations — τίποτα πάνω από 300ms στο UI */
  --m-press: 120ms;
  --m-fast:  180ms;
  --m-base:  240ms;
  --m-slow:  400ms;

  --m-stagger: 55ms;

  --m-glow: 242, 16, 34;   /* το κόκκινο σε RGB, για rgba() */
}


/* ============================================================
   01 · CARD HOVER + IMAGE ZOOM
   Στόχοι: .bike (index + related στο motorcycle), .home-service
   ============================================================ */
@media (hover:hover) and (pointer:fine){

  .bike{
    transition: transform var(--m-base) var(--m-ease-out),
                border-color var(--m-base) var(--m-ease-hover),
                box-shadow var(--m-base) var(--m-ease-out);
    will-change: transform;
  }
  .bike .bike-photo img{
    transition: transform var(--m-slow) var(--m-ease-out),
                opacity .22s ease;              /* κρατάμε το υπάρχον opacity */
  }
  .bike .bike-foot .details{
    display: inline-block;
    transition: transform var(--m-base) var(--m-ease-out),
                color var(--m-fast) var(--m-ease-hover);
  }

  /* κόκκινο wash από κάτω — εμφανίζεται μόνο στο hover */
  .bike .bike-photo::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background: linear-gradient(0deg, rgba(var(--m-glow), .13), transparent 58%);
    opacity:0;
    transition: opacity var(--m-base) var(--m-ease-hover);
  }

  .bike:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 44px -20px rgba(0,0,0,.55),
                0 0 0 1px rgba(var(--m-glow), .14);
  }
  .bike:hover .bike-photo img      { transform: scale(1.06) }
  .bike:hover .bike-photo::after   { opacity: 1 }
  .bike:hover .bike-foot .details  { transform: translateX(3px) }

  /* service cards στην αρχική */
  .home-service{
    transition: transform var(--m-base) var(--m-ease-out),
                border-color var(--m-base) var(--m-ease-hover);
  }
  .home-service .home-service-icon{
    transition: transform var(--m-base) var(--m-ease-out);
  }
  .home-service:hover                    { transform: translateY(-4px) }
  .home-service:hover .home-service-icon { transform: scale(1.09) rotate(-4deg) }

  /* trust cards στο parts */
  .trust-item{ transition: transform var(--m-base) var(--m-ease-out) }
  .trust-item .trust-icon{ transition: transform var(--m-base) var(--m-ease-out) }
  .trust-item:hover{ transform: translateY(-4px) }
  .trust-item:hover .trust-icon{ transform: scale(1.1) }
}

/* press feedback — δουλεύει και σε touch */
.bike:active{
  transform: translateY(-2px) scale(.988);
  transition-duration: var(--m-press);
}


/* ============================================================
   02 · SPOTLIGHT GLOW
   Ενεργοποιείται από το motion.js, που βάζει .rb-spot
   στο container και διαβάζει --mx / --my.
   ============================================================ */
.rb-spot{ position: relative }

.rb-spot > *{ position: relative }

.rb-spot > *::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:340px; height:340px; left:0; top:0; border-radius:50%;
  background: radial-gradient(circle, rgba(var(--m-glow), .40), transparent 62%);
  filter: blur(60px);
  opacity:0;
  transform: translate(calc(var(--mx, 0px) - 170px),
                       calc(var(--my, 0px) - 170px));
  transition: opacity var(--m-slow) var(--m-ease-hover);
}
/* ανάβουν ΟΛΑ μαζί όταν το ποντίκι μπει στο group */
.rb-spot:hover > *::before{ opacity:1 }

/* το περιεχόμενο πρέπει να είναι πάνω από το φως */
.rb-spot > * > *{ position:relative; z-index:1 }


/* ============================================================
   03 · STAGGER REVEAL
   .rb-reveal μπαίνει από το motion.js σε επιλεγμένα containers
   ============================================================ */
.rb-reveal > *{
  opacity:0;
  transform: translateY(14px);
  transition: opacity var(--m-slow) var(--m-ease-out),
              transform var(--m-slow) var(--m-ease-out);
}
.rb-reveal.rb-in > *{ opacity:1; transform:none }

/* το delay μπαίνει inline από το JS (i * --m-stagger) */


/* ============================================================
   04 · SKELETON SHIMMER + CROSSFADE
   ============================================================ */
.rb-sk{
  background: linear-gradient(90deg,
      rgba(255,255,255,.045) 25%,
      rgba(255,255,255,.11)  50%,
      rgba(255,255,255,.045) 75%);
  background-size: 200% 100%;
  animation: rbShimmer 1.35s var(--m-ease-in-out) infinite;
  border-radius: 6px;
  color: transparent;
}
@keyframes rbShimmer{
  0%  { background-position:  200% 0 }
  100%{ background-position: -200% 0 }
}

/* σε ανοιχτόχρωμο φόντο (πριν το dark theme) */
.rb-sk-light .rb-sk{
  background: linear-gradient(90deg,
      rgba(0,0,0,.055) 25%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.055) 75%);
  background-size: 200% 100%;
}

/* --- Skeleton grid ---
   Το JS του δίνει ΤΟ ΙΔΙΟ class με το πραγματικό grid (.grid-bikes),
   ώστε να κληρονομεί κάθε υπάρχον layout rule — συμπεριλαμβανομένων
   των sections με σταθερό ύψος (π.χ. #popular{height:37.5svh}).
   Εδώ μπαίνουν μόνο τα «γεμίσματα». */
.rb-sk-grid{ transition: opacity var(--m-base) var(--m-ease-hover) }
.rb-sk-grid.rb-gone{ opacity:0; pointer-events:none }

/* τα skeleton cards δεν αντιδρούν σε hover */
.rb-sk-card{ pointer-events:none }
.rb-sk-card:hover{ transform:none!important; box-shadow:none!important }

.rb-sk-shot{ position:absolute; inset:0; display:block; border-radius:0 }

.rb-sk-line{ display:block; height:10px; width:100% }
.rb-sk-line.w30{ width:30% } .rb-sk-line.w45{ width:45% }
.rb-sk-line.w70{ width:70% } .rb-sk-line.big{ height:1em; width:76% }

/* κρατάμε το ύψος των γραμμών σταθερό μέσα στα υπάρχοντα στοιχεία */
.rb-sk-card .bike-meta,
.rb-sk-card .bike-spec{ display:block }
.rb-sk-card .bike-stats li{ flex:1 }

/* το πραγματικό grid μπαίνει με crossfade όταν έρθουν τα δεδομένα */
.rb-fade-in{
  opacity:0;
  transform: translateY(10px) scale(.99);      /* ΠΟΤΕ scale(0) */
  transition: opacity var(--m-slow) var(--m-ease-out) 60ms,
              transform var(--m-slow) var(--m-ease-out) 60ms;
}
.rb-fade-in.rb-in{ opacity:1; transform:none }


/* ============================================================
   05 · BUTTONS & MICRO-STATES
   ============================================================ */
.btn{
  transition: background var(--m-fast) var(--m-ease-hover),
              border-color var(--m-fast) var(--m-ease-hover),
              color var(--m-fast) var(--m-ease-hover),
              transform var(--m-press) var(--m-ease-out),
              box-shadow var(--m-base) var(--m-ease-out);
}
.btn:active{ transform: scale(.97) }
.btn:focus-visible{ outline:2px solid var(--red, #F21022); outline-offset:3px }

@media (hover:hover) and (pointer:fine){
  .btn-red:hover{
    box-shadow: 0 8px 22px -8px rgba(var(--m-glow), .70);
  }
}

/* loading state — μπαίνει από το motion.js στο parts form */
.btn.rb-busy{ pointer-events:none; color:transparent!important; position:relative }
.btn.rb-busy::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.28); border-top-color:#fff;
  animation: rbSpin .62s linear infinite;     /* linear = σωστό για spinner */
}
@keyframes rbSpin{ to{ transform: rotate(360deg) } }


/* ============================================================
   06 · ICONS — glyph → SVG χωρίς καμία αλλαγή στο markup
   Το κείμενο του glyph κρύβεται (font-size:0) και μπαίνει
   ένα ::before με mask-image. Αν σβήσεις το αρχείο,
   ξαναεμφανίζονται τα αρχικά σύμβολα.
   ============================================================ */
.tick, .check,
.side .navbtn .nav-icon,
.global-search b{
  font-size:0!important;
  line-height:0;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
}
.tick::before, .check::before,
.side .navbtn .nav-icon::before,
.global-search b::before{
  content:"";
  display:block;
  background-color: currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}

/* ✓ στα index / about / parts */
.tick::before, .check::before{
  width:1em; height:1em;
  font-size:15px;                         /* το μέγεθος του εικονιδίου */
  -webkit-mask-image:var(--i-check); mask-image:var(--i-check);
}

/* admin sidebar */
.side .navbtn .nav-icon::before{ width:17px; height:17px }
.side .navbtn .nav-icon{ transition: transform var(--m-base) var(--m-ease-out) }
.side .navbtn:hover .nav-icon{ transform: scale(1.12) }

[data-view="overview"]  .nav-icon::before{ -webkit-mask-image:var(--i-home);    mask-image:var(--i-home) }
[data-view="stock"]     .nav-icon::before{ -webkit-mask-image:var(--i-grid);    mask-image:var(--i-grid) }
[data-view="enquiries"] .nav-icon::before{ -webkit-mask-image:var(--i-inbox);   mask-image:var(--i-inbox) }
[data-view="parts"]     .nav-icon::before{ -webkit-mask-image:var(--i-spark);   mask-image:var(--i-spark) }
#sideImport             .nav-icon::before{ -webkit-mask-image:var(--i-upload);  mask-image:var(--i-upload) }
[data-view="setup"]     .nav-icon::before{ -webkit-mask-image:var(--i-pulse);   mask-image:var(--i-pulse) }
#logout                 .nav-icon::before{ -webkit-mask-image:var(--i-logout);  mask-image:var(--i-logout) }

/* το ⌕ στο admin search */
.global-search b::before{
  width:16px; height:16px;
  -webkit-mask-image:var(--i-search); mask-image:var(--i-search);
}

/* το ↓ στο about */
.scroll-arrow{
  transition: transform var(--m-base) var(--m-ease-out);
}
.family-transition:hover .scroll-arrow{ transform: translateY(4px) }

/* --- τα εικονίδια ως data-URI --- */
:root{
  --i-check:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --i-home:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21H3z'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E");
  --i-grid:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='7' height='16' rx='1'/%3E%3Crect x='13.5' y='4' width='7' height='16' rx='1'/%3E%3C/svg%3E");
  --i-inbox:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h5l2 3h4l2-3h5'/%3E%3Cpath d='M5.5 4h13l2.5 8v8H3v-8z'/%3E%3C/svg%3E");
  --i-spark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 6.1L20 11l-6.1 1.9L12 19l-1.9-6.1L4 11l6.1-1.9z'/%3E%3C/svg%3E");
  --i-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M6 11l6-6 6 6'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E");
  --i-pulse:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5 7 4-14 2.5 7h5'/%3E%3C/svg%3E");
  --i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4'/%3E%3Cpath d='M10 8l-4 4 4 4'/%3E%3Cpath d='M6 12h10'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
}


/* ============================================================
   07 · VIEW TRANSITIONS  (index ⇄ motorcycle)
   Native. Όπου δεν υποστηρίζεται, δεν συμβαίνει τίποτα.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto }
}

::view-transition-old(rb-bike-hero),
::view-transition-new(rb-bike-hero){
  object-fit: contain;                  /* ταιριάζει με το .bike-photo img */
  animation-duration: 420ms;
  animation-timing-function: var(--m-ease-out);
}


/* ============================================================
   08 · GALLERY CROSSFADE  (motorcycle.html)
   ============================================================ */
#stageImg{
  transition: opacity var(--m-base) var(--m-ease-hover),
              transform var(--m-slow) var(--m-ease-out);
}
#stageImg.rb-swapping{ opacity:.25; transform: scale(.985) }

.thumb-scroll .thumb,
.thumb-scroll button{
  transition: transform var(--m-fast) var(--m-ease-out),
              border-color var(--m-fast) var(--m-ease-hover),
              opacity var(--m-fast) var(--m-ease-hover);
}
@media (hover:hover) and (pointer:fine){
  .thumb-scroll .thumb:hover,
  .thumb-scroll button:hover{ transform: translateY(-2px) }
}


/* ============================================================
   09 · LAYOUT FIX — about.html, ενότητα «Built around riders»
   ------------------------------------------------------------
   ΤΟ ΠΡΟΒΛΗΜΑ
   .story-main έχει height:100% πάνω σε γονέα με height:auto.
   Το ποσοστό δεν έχει σε τι να πατήσει, οπότε ο browser γυρνά
   σε auto και η εικόνα παίρνει το φυσικό της aspect ratio
   (708×847). Αποτέλεσμα: όσο φαρδύτερη η οθόνη, τόσο ψηλότερη
   η εικόνα, ενώ το κείμενο δίπλα μένει σταθερό.
       1440px → εικόνα 802px, κείμενο 488px  (314px κενό)
       1920px → εικόνα 1077px, κείμενο 489px (588px κενό)

   Η ΛΥΣΗ
   1. Δίνουμε ΟΡΙΣΜΕΝΟ ύψος στο .story-media. Τώρα το height:100%
      της εικόνας πατάει κάπου, και το object-fit:cover κόβει
      αντί να μεγαλώνει.
   2. Κεντράρουμε κάθετα τις δύο στήλες (align-items:center).
   3. Βάζουμε max-width ώστε σε πολύ φαρδιές οθόνες να μην
      τεντώνεται άλλο.
   4. Μικρή αναπροσαρμογή στις στήλες, ώστε το κείμενο να πάρει
      λίγο περισσότερο χώρο.

   Δεν αφαιρείται κανένας υπάρχων κανόνας — μόνο υπερισχύουν
   αυτοί εδώ. Σβήσε αυτό το μπλοκ και όλα επιστρέφουν όπως ήταν.
   ============================================================ */
.story-section{
  max-width: 1560px;
  margin-inline: auto;
  align-items: center;                 /* το κείμενο κεντράρεται δίπλα στη φωτό */
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
}

/* Ο τίτλος μεγάλωνε με 4vw ενώ η στήλη σταματά στα 1560px,
   οπότε σε φαρδιές οθόνες έσπαγε σε δύο γραμμές. Κόβουμε την
   κορυφή του clamp ώστε να χωράει πάντα σε μία. */
.story-copy h2{ font-size: clamp(46px, 3.7vw, 60px) }

.story-media{
  height: clamp(460px, 56vh, 640px);   /* ΟΡΙΣΜΕΝΟ ύψος — εδώ ήταν το bug */
  min-height: 0;
  margin-bottom: 46px;                 /* χώρος για το inset που προεξέχει */
}

.story-main{
  height: 100%;
  min-height: 0;                       /* ακυρώνει το min-height:520px */
}

/* το inset και το κόκκινο πλαίσιό του ακολουθούν το νέο ύψος */
.story-inset,
.story-inset-frame{ height: 70% }

@media (max-width: 1200px){
  .story-section{ grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr) }
}
@media (max-width: 900px){
  .story-section{ grid-template-columns: 1fr }
  .story-media{ height: clamp(360px, 52vh, 480px) }
}
@media (max-width: 620px){
  .story-media{ height: 390px; margin-bottom: 54px }
}


/* ============================================================
   10 · AUDIT #22 (ΑΝΑΘΕΩΡΗΜΕΝΟ) — λογότυπα brands στα κανονικά
   τους χρώματα.
   ------------------------------------------------------------
   Παλιά τα κάναμε όλα λευκά με filter, επειδή τα PNG ήταν σκούρα.
   Τώρα τα ίδια τα αρχεία είναι σωστά: Keeway πορτοκαλί, Ezi μπλε,
   Linhai μπλε (φωτισμένο για μαύρο φόντο), Morbidelli & Hooleox
   λευκά σήματα. Οπότε ΚΑΝΕΝΑ filter — μόνο ενιαίο οπτικό ύψος.
   ============================================================ */
.brand-btn img{
  max-height:30px!important;
  max-width:112px!important;
  filter:none;
  opacity:.92;
  transition:opacity 180ms ease,transform 240ms var(--m-ease-out);
}
.brand-btn:hover img,
.brand-btn.on img,
.brand-btn[aria-pressed="true"] img{
  filter:none;
  opacity:1;
}
/* Morbidelli & Hooleox: κυκλικά εμβλήματα — δεν θέλουν λευκή πλάκα */
.brand-btn[data-brand="Morbidelli"] img,
.brand-btn[data-brand="Hooleox"] img{
  max-height:34px!important;max-width:34px!important;
  background:none;border-radius:0;padding:0;
}
/* Στο footer / brand strip, ίδια αντιμετώπιση: κανονικά χρώματα */
.brand-strip img,.brands-row img{filter:none;opacity:.9}


/* ============================================================
   11 · AUDIT #24 — πεδία αναζήτησης: brand focus, όχι μπλε του browser
   ============================================================ */
input[type="search"]{
  appearance:none;-webkit-appearance:none;
}
/* το μπλε ✕ του Chrome/Safari → δικό μας, κόκκινο */
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;cursor:pointer;
  background-color:currentColor;opacity:.5;
  -webkit-mask-image:var(--i-x);mask-image:var(--i-x);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  transition:opacity 180ms ease,color 180ms ease;
}
input[type="search"]::-webkit-search-cancel-button:hover{opacity:1;color:var(--red,#F21022)}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}

/* Prin: outline me offset:2px PANO se pedio pou ehei idi kokkino
   border -> fainontan duo kokkines grammes me keno anamesa.
   Tora: ena border + apalo glow kollito, horis diplo daktilio. */
input:focus-visible,textarea:focus-visible,select:focus-visible,
input[type="search"]:focus,input[type="search"]:focus-visible{
  outline:none;
  border-color:var(--red,#F21022);
  box-shadow:0 0 0 3px rgba(239,32,40,.16);
}
:root{
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}


/* ============================================================
   12 · REDUCED MOTION & TOUCH
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* το reveal δεν πρέπει να αφήσει τίποτα αόρατο */
  .rb-reveal > *, .rb-fade-in{ opacity:1!important; transform:none!important }
}